There is a kind of animations that has not stopped increasing its presence in the most modern and original websites: the animations based on the scroll
event of Javascript. This trend literally exploded when the parallax effects appeared, and since then its use has become more frequent.
But the truth is that you must be very careful when implementing an animation based on scroll, since it can seriously affect the performance of the website, especially on mobile devices.
That’s why we invite you to continue reading the tutorial, where we will implement from scratch and with vanilla Javascript, this beautiful animation based on scroll, also keeping good performance even on mobile devices:
Let’s start!
We will use a simple HTML structure, where each image in the design will actually be a div
element in the HTML code, and the images will be defined and positioned with CSS, which will facilitate this task:
<!-- The `.container` element will contain all the images -->
<!-- It will be used also to perform the custom scroll behavior -->
<div class="container">
<!-- Each following `div` correspond to one image -->
<!-- The images will be set using CSS backgrounds -->
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
Now let’s look at the CSS styles needed to achieve the desired design.
First let’s start by creating the layout. This time we will use a CSS Grid, taking advantage of the fact that this technology is already supported in all modern browsers.
// The container for all images
.container {
// 2 columns grid
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0 10%;
justify-items: end; // This will align all items (images) to the right
// Fixed positioned, so it won't be affected by default scroll
// It will be moved using `transform`, to achieve a custom scroll behavior
position: fixed;
top: 0;
left: 0;
width: 100%;
}
It is important to note that, in addition to the CSS grid, we are giving the .container
element a fixed
position. This will make this element not affected by the default scroll behavior, allowing to perform custom transforms with Javascript.
Now let’s see how to define the styles associated with the images. See the comments for a brief explanation of each part:
// Styles for image elements
// Mainly positioning and background styles
.image {
position: relative;
width: 300px;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
// This will align all even images to the left
// For getting centered positioned images, respect to the viewport
&:nth-child(2n) {
justify-self: start;
}
// Set each `background-image` using a SCSS `for` loop
@for $i from 1 through 10 {
&:nth-child(#{$i}) {
background-image: url('../img/image#{$i}.jpg');
}
}
}
Now let’s make some adjustments for small screens, since there we should have a column instead of two.
// Adjusting layout for small screens
@media screen and (max-width: 760px) {
.container {
// 1 column grid
grid-template-columns: 1fr;
// Fix image centering
justify-items: center;
}
// Fix image centering
.image:nth-child(2n) {
justify-self: center;
}
}
And this way we have our design almost ready, we just need to add the background to the body, which we will not explain so as not to extend the tutorial with trivial details.
Note also that for now you will not be able to scroll, since we have given a fixed position to the container element. Next we will solve this problem and bring our design to life :)
Now let’s see how to implement, from scratch and using vanilla Javascript, a custom scroll movement, smoother and suitable for the animations planned. All this we will achieve without trying to reimplement all the work associated with the scroll that the web browser does. Instead, we will keep the native scroll functionality, at the same time that we will have a custom scroll behavior. Sounds good, huh? Let’s see how to do it!
First let’s look at some useful functions that we will be using. Lean on the comments for a better understanding:
// Easing function used for `translateX` animation
// From: https://gist.github.com/gre/1650294
function easeOutQuad (t) {
return t *_ (2 - t)
}
// Returns a random number (integer) between __`min`__ and __`max`__
function random (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min_
}
// Returns a random number as well, but it could be negative also
function randomPositiveOrNegative (min, max) {
return random(min, max) * (Math.random() > 0.5 ? 1 : -1)
}
// Set CSS `tranform` property for an element
function setTransform (el, transform) {
el.style.transform = transform
el.style.WebkitTransform = transform
}
And these are the variables that we will be using also, described briefly to understand much better the code that we will present below:
// Current scroll position
var current = 0
// Target scroll position
var target = 0
// Ease or speed for moving from `current` to `target`
var ease = 0.075
// Utility variables for `requestAnimationFrame`
var rafId = undefined
var rafActive = false
// Container element
var container = document.querySelector('.container')
// Array with `.image` elements
var images = Array.prototype.slice.call(document.querySelectorAll('.image'))
// Variables for storing dimmensions
var windowWidth, containerHeight, imageHeight
// Variables for specifying transform parameters (max limits)
var rotateXMaxList = []
var rotateYMaxList = []
var translateXMax = -200
// Popullating the `rotateXMaxList` and `rotateYMaxList` with random values
images.forEach(function () {
rotateXMaxList.push(randomPositiveOrNegative(20, 40))
rotateYMaxList.push(randomPositiveOrNegative(20, 60))
})
With all this ready, let’s see how to implement our custom scroll behavior.
To make our webpage scrollable, we will add a new div
element to the body
dynamically, to which we will set the same height
of our container element, in such a way that the scrollable area will be the same.
// The `fakeScroll` is an element to make the page scrollable
// Here we are creating it and appending it to the `body`
var fakeScroll = document.createElement('div')
fakeScroll.className = 'fake-scroll'
document.body.appendChild(fakeScroll)
// In the `setupAnimation` function (below) we will set the `height` properly
We also need a bit of CSS styles so that our .fake-scroll
element makes the page scrollable, without interfering with the layout and the other elements:
// The styles for a `div` element (inserted with Javascript)
// Used to make the page scrollable
// Will be setted a proper `height` value using Javascript
.fake-scroll {
position: absolute;
top: 0;
width: 1px;
}
Now let’s see the function responsible for calculating all the necessary dimensions, and preparing the ground for the animations:
// Geeting dimmensions and setting up all for animation
function setupAnimation () {
// Updating dimmensions
windowWidth = window.innerWidth
containerHeight = container.getBoundingClientRect().height
imageHeight = containerHeight / (windowWidth > 760 ? images.length / 2 : images.length)
// Set `height` for the fake scroll element
fakeScroll.style.height = containerHeight + 'px'
// Start the animation, if it is not running already
startAnimation()
}
Once the setupAnimation
function is called, the page will be scrollable, and everything will be ready to start listening to the scroll
event and run the animation.
So let’s see what we will do when the scroll
event is triggered:
// Update scroll `target`, and start the animation if it is not running already
function updateScroll () {
target = window.scrollY || window.pageYOffset
startAnimation()
}
// Listen for `scroll` event to update `target` scroll position
window.addEventListener('scroll', updateScroll)
Easy! Each time the scroll
event is triggered, you simply update the target variable with the new position, and call the startAnimation
function, which does nothing but start the animation if it is not active yet. Here is the code:
// Start the animation, if it is not running already
function startAnimation () {
if (!rafActive) {
rafActive = true
rafId = requestAnimationFrame(updateAnimation)
}
}
Now let’s see the internal behavior for the updateAnimation
function, which is the one that actually performs all calculations and transformations in each frame, to achieve the desired animation. Please follow the comments for a better understanding of the code:
// Do calculations and apply CSS `transform`s accordingly
function updateAnimation () {
// Difference between `target` and `current` scroll position
var diff = target - current
// `delta` is the value for adding to the `current` scroll position
// If `diff < 0.1`, make `delta = 0`, so the animation would not be endless
var delta = Math.abs(diff) < 0.1 ? 0 : diff * ease
if (delta) { // If `delta !== 0`
// Update `current` scroll position
current += delta
// Round value for better performance
current = parseFloat(current.toFixed(2))
// Call `update` again, using `requestAnimationFrame`
rafId = requestAnimationFrame(updateAnimation)
} else { // If `delta === 0`
// Update `current`, and finish the animation loop
current = target
rafActive = false
cancelAnimationFrame(rafId)
}
// Update images (explained below)
updateAnimationImages()
// Set the CSS `transform` corresponding to the custom scroll effect
setTransform(container, 'translateY('+ -current +'px)')
}
And our custom scroll behavior is ready! After calling the function setupAnimation
, you could scroll as you normally would, and the .container
element would be moved in correspondence, but with a very smooth and pleasant effect :)
Then we only have to animate the images in correspondence with the position in which they are with respect to the viewport. Let’s see how to do it!
To animate the images we will use the current position of the fake scroll (current
), and we will calculate the intersectionRatio
(similar to the value from the IntersectionObserver API) between each image and the viewport. Then, we just have to apply the transformations that we want depending on that ratio, and we will obtain the desired animation.
The idea is to show the image without any transformation when it is in the center of the screen (intersectionRatio = 1
), and to increase the transformations as the image moves towards the ends of the screen (intersectionRatio = 0
).
Pay close attention to the code shown below, especially the part where the intersectionRatio
for each image is calculated. This value is essential to then apply the appropriate CSS transformations. Please follow the comments for a better understanding:
// Calculate the CSS `transform` values for each `image`, given the `current` scroll position
function updateAnimationImages () {
// This value is the `ratio` between `current` scroll position and images `height`
var ratio = current / imageHeight
// Some variables for using in the loop
var intersectionRatioIndex, intersectionRatioValue, intersectionRatio
var rotateX, rotateXMax, rotateY, rotateYMax, translateX
// For each `image` element, make calculations and set CSS `transform` accordingly
images.forEach(function (image, index) {
// Calculating the `intersectionRatio`, similar to the value provided by
// the IntersectionObserver API
intersectionRatioIndex = windowWidth > 760 ? parseInt(index / 2) : index
intersectionRatioValue = ratio - intersectionRatioIndex
intersectionRatio = Math.max(0, 1 - Math.abs(intersectionRatioValue))
// Calculate the `rotateX` value for the current `image`
rotateXMax = rotateXMaxList[index]
rotateX = rotateXMax - (rotateXMax _ intersectionRatio)
rotateX = rotateX.toFixed(2)
// Calculate the _`rotateY`_ value for the current _`image`_
rotateYMax = rotateYMaxList_[_index]
rotateY = rotateYMax - (rotateYMax _ intersectionRatio)
rotateY = rotateY.toFixed(2)
// Calculate the `translateX` value for the current `image`
if (windowWidth > 760) {
translateX = translateXMax - (translateXMax * easeOutQuad(intersectionRatio))
translateX = translateX.toFixed(2)
} else {
translateX = 0
}
// Invert `rotateX` and `rotateY` values in case the image is below the center of the viewport
// Also update `translateX` value, to achieve an alternating effect
if (intersectionRatioValue < 0) {
rotateX = -rotateX
rotateY = -rotateY
translateX = index % 2 ? -translateX : 0
} else {
translateX = index % 2 ? 0 : translateX
}
// Set the CSS `transform`, using calculated values
setTransform(image, 'perspective(500px) translateX('+ translateX +'px) rotateX('+ rotateX +'deg) rotateY('+ rotateY +'deg)')
})
}
And we are almost ready to enjoy our animation. We only need to make the initial call to the setupAnimation
function, in addition to updating the dimensions in case the resize
event is triggered:
// Listen for `resize` event to recalculate dimmensions
window.addEventListener('resize', setupAnimation)
// Initial setup
setupAnimation()
Scroll! Scroll! Scroll!
So far, everything should work perfectly in Desktop, but the story is very different if we try the animation on mobile devices.
The problem occurs when the address bar (and the navigation bar in the footer of some browsers) hides when it is scrolled down, and is shown again when scrolling upwards. This is not a bug, but a feature. The problem appears when we use the CSS unit vh
, since in this process that unit is recalculated, resulting in an unwanted jump in our animation.
The workaround that we have implemented is to use the small library vh-fix, which defines, for each element with the class .vh-fix
, a static height
based on their vh
value and the viewport height
. In this way, we should no longer have unwanted jumps :)
And we have finished implementing this beautiful scroll based animation:
You can check the live demo, play with the code in Codepen, or check the full code in the repository in Github.
Please keep in mind that the objective of this tutorial is essentially academic and to be used as inspiration. To use this demo in production other aspects must be taken into account, such as accessibility, browser support, the use of some debounce
function for the scroll
and resize
events, etc.
Without further ado, we hope you enjoyed it and it has been useful!
Originally published by Luis Manuel at https://scotch.io
#javascript #css #web-development