Making elements appear based on their scroll position is a very popular design choice when building web pages but it usually involves using a plugin or library.
In this tutorial you’ll learn how to implement animation on scroll using vanilla JavaScript and CSS. The main advantage of using a custom implementation (as opposed to a library) is that it allows us to optimize our functions for accessibility and performance.
Scrolling Animation Demo
Here’s an example of how animating elements on scroll works:
Our implementation relies on CSS for animations and JavaScript to handle triggering the necessary styles. We’ll start by creating the layout.
1. Define the Page Structure
We’ll create the layout of our page using HTML and then assign a common class name to the elements we want to animate on scroll. This class name is what we’ll be targeting in JavaScript.
In the demo above, the elements were assigned the class name js-scroll so the HTML looks something like this:
<header>
<!--this is where the content of the header goes-->
</header>
<section class="scroll-container">
<div class="scroll-element js-scroll">
</div>
<div class="scroll-caption">
This animation fades in from the top.
</div>
</section>
2. Styling With CSS
CSS does a lot of the heavy-lifting as it determines the style of animation of each element. In this case, we’ll be animating the elements with the class name scrolled.
This is an example of a simple fade-in animation:
.js-scroll {
opacity: 0;
transition: opacity 500ms;
}
.js-scroll.scrolled {
opacity: 1;
}
With this code, any js-scroll element on the page is hidden with an opacity of 0 until the class name scrolled is applied to it.
3. Targeting Elements With JavaScript
Once we have our layout and styles, we’re going to create the JavaScript functions to assign the class name to the elements when they scroll into view. We’re also going to fade out the elements in JavaScript instead of CSS, as we want the elements to be visible in the event a browser does not have JavaScript enabled.
We’ll break down the logic like this:
- Get all
js-scrollelements on the page - Fade out elements
- Detect when the element is within the viewport
- Assign the
scrolledclass name to the element if it is in view.
Target Elements on The Page
We’ll target all the js-scroll elements on the page using the document.querySelectorAll() method. It should look like this:
const scrollElements = document.querySelectorAll(".js-scroll");
Fade Out Elements
First, we need to remove the opacity:0 for .js-scroll in our CSS. Then we include this line in our JavaScript:
scrollElements.forEach((el) => {
el.style.opacity = 0
})
This allows the elements to have their default styling if JavaScript is disabled in the browser.
Detecting When an Element Is in View
We can detect when an element is in view of the user by determining if the distance of the element from the top of the page is less than the height of the visible part of the page.
In JavaScript, we use the getBoundingClientRect().top method to get an element’s distance from the top of the page, and window.innerHeight or document.documentElement.clientHeight to get the height of the viewport.
We’ll create an elementInView function using the above logic:
const elementInView = (el) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <= (window.innerHeight || document.documentElement.clientHeight)
);
};
We can modify this function to detect when the element has scrolled x pixels into the page, or detect when a percentage of the page has been scrolled.
const elementInView = (el, scrollOffset = 0) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <=
((window.innerHeight || document.documentElement.clientHeight) - scrollOffset)
);
};
In this case, the function returns true if the element has scrolled by the scrollOffset amount into the page. Modifying the logic gives us a different function for targeting elements based on percentage scroll.
const elementInView = (el, percentageScroll = 100) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <=
((window.innerHeight || document.documentElement.clientHeight) * (percentageScroll/100))
);
};
An added benefit of a custom implementation is that we can define the logic to suit our specific needs.
Note: it’s possible to use the Intersection Observer API to achieve the same effect, however, at the time of writing this article, Intersection Observer is not supported in Internet Explorer so it doesn’t fit our bill of “works on all browsers”.
Assign Class Name to Element
Now that we’re able to detect if our element has scrolled into the page, we’ll need to define a function to handle displaying the element–in this case we’re displaying the element by assigning the scrolled class name.
const displayScrollElement = (element) => {
element.classList.add("scrolled");
};
We’ll then combine our logic with the display function and use the forEach method to call the function on all js-scroll elements.
const handleScrollAnimation = () => {
scrollElements.forEach((el) => {
if (elementInView(el, 100)) {
displayScrollElement(el);
}
})
}
An optional feature is to reset the element to its default state when it’s no longer in view. We can do that by defining a hideScrollElement function and including it in an else statement to our above function:
const hideScrollElement = (element) => {
element.classList.remove("scrolled");
};
const handleScrollAnimation = () => {
scrollElements.forEach((el) => {
if (elementInView(el, 100)) {
displayScrollElement(el);
} else {
hideScrollElement(el);
}
})
}
Finally, we’ll pass the above method into a scroll event listener on the window so it runs whenever the user scrolls.
window.addEventListener('scroll', () => {
handleScrollAnimation();
})
And viola, we’ve implemented all the functions we need to animate on scroll.
We can see how the logic works in this demo:
The complete code looks like this. JavaScript:
const scrollOffset = 100;
const scrollElement = document.querySelector(".js-scroll");
const elementInView = (el, offset = 0) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <=
((window.innerHeight || document.documentElement.clientHeight) - offset)
);
};
const displayScrollElement = () => {
scrollElement.classList.add('scrolled');
}
const hideScrollElement = () => {
scrollElement.classList.remove('scrolled');
}
const handleScrollAnimation = () => {
if (elementInView(scrollElement, scrollOffset)) {
displayScrollElement();
} else {
hideScrollElement();
}
}
window.addEventListener('scroll', () => {
handleScrollAnimation();
})
CSS:
.js-scroll {
width: 50%;
height: 300px;
background-color: #DADADA;
transition: background-color 500ms;
}
.js-scroll.scrolled {
background-color: aquamarine;
}
4. More Animations With CSS
Let’s take a look at the first demo again:
We see that the elements appear with different animations. This was done by assigning different CSS animations to class names. The HTML for this demo looks like this:
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in">
</div>
<div class="scroll-caption">
This animation fades in.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in-bottom">
</div>
<div class="scroll-caption">
This animation slides in to the top.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-left">
</div>
<div class="scroll-caption">
This animation slides in from the left.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-right">
</div>
<div class="scroll-caption">
This animation slides in from the right.
</div>
</section>
Note: the classes next to the js-scroll class are what we target in CSS to handle the different animations. In our CSS stylesheet, we’ll have:
.scrolled.fade-in {
animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
animation: slide-in-right 1s ease-in-out both;
}
@keyframes slide-in-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-in-bottom {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
We don’t need to make any changes to the JavaScript code since the logic remains the same. This means we can have any number of different animations on a page without writing new functions.
5. Increasing Performance with Throttle
Whenever we include a function in a scroll listener, that function is called every time the user scrolls the page. Scrolling a page of 500px can cause a function to be called at least 50 times. If we’re trying to include a lot of elements on the page, this can cause our page to slow down significantly.
Throttle Function to the Rescue
We can reduce the number of times a function is called by using a “throttle function”. A throttle function is a higher order function that calls the function passed into it only once during a specified time interval.
It’s especially useful with scrolling events as we don’t need to detect every pixel scrolled by the user. For example, if we have a throttle function with a timer of 100ms, the function will only be called once for every 100ms the user scrolls.
A throttle function can be implemented in JavaScript like this:
//initialize throttleTimer as false
let throttleTimer = false;
const throttle = (callback, time) => {
//don't run the function while throttle timer is true
if (throttleTimer) return;
//first set throttle timer to true so the function doesn't run
throttleTimer = true;
setTimeout(() => {
//call the callback function in the setTimeout and set the throttle timer to false after the indicated time has passed
callback();
throttleTimer = false;
}, time);
}
We can modify our window on scroll event listener to look like this
window.addEventListener('scroll', () => {
throttle(handleScrollAnimation, 250);
})
Now our handleScrollAnimation function is called every 250ms while the user is scrolling.
Here’s what the updated demo looks like:
6. Improving Accessibility
Performance isn’t the only requirement when implementing a custom feature; we also need to design for accessibility. Designing for accessibility means taking users’ choices and circumstances into consideration. Some users may not want to have animations at all, so we need to account for that.
The Reduced Motion Media Query
We can do that with the prefers-reduced-motion query and a JavaScript implementation.
“prefers-reduced-motion [...] is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses” – MDN
Modifying our code above, the query would look like this in CSS:
@media (prefers-reduced-motion) {
.js-scroll {
opacity: 1;
}
.scrolled {
animation: none !important;
}
}
With these lines of code, we ensure that the animated elements are always visible and the animation is turned off for all elements.
The prefers-reduced-motion query isn’t fully supported across all browsers so we can include a JavaScript fallback:
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
window.addEventListener("scroll", () => {
//check if mediaQuery exists and if the value for mediaQuery does not match 'reduce', return the scrollAnimation.
if (mediaQuery && !mediaQuery.matches) {
handleScrollAnimation()
}
});
This way, if the user prefers reduced motion, the handleScrollAnimation function is never called at all.
That’s How to Animate on Scroll with JavaScript
We now have a highly performant, fully accessible implementation of the “animate on scroll” feature that works across all browsers!
More Practical JavaScript Tutorials
No comments:
Post a Comment