Scroll animations (also known as scroll-based animations) are website effects that are initiated by scrolling.
If you're just getting started with scroll animations, the first thing you want to know is that there are two types of scroll animations: scroll-triggered animations and scroll-bound animations.
Knowing the difference between the two will be critical as you begin to learn how scroll animations are made. While both are initiated by scrolling, the result is completely different.
A scroll-triggered animation is an animation that starts at a specific scroll position and executes independent of additional scrolling. It can execute once or repeatedly, depending on the effect you want to create.
The example below uses the Intersection Observer API to detect when the element has reached the center of the viewport, then it plays a CSS animation by adding and removing a specified class.
Scroll-triggered animation libraries are not all the same: they can use a variety of technologies and offer different features.
If you want to create scroll-triggered animations using a library, it's important to pick the right one for your needs. I wrote a guide to the top 10 scroll-triggered animation libraries that you can check out to help.
A scroll-bound animation is an animation that is directly bound to the scroll position. The progress of the animation is determined by how far the user scrolls. The scroll position acts as a timeline for the animation: the faster the user scrolls, the faster the animation executes.
The example below uses ScrollMagic, a scroll animation library, to keep track of the distance that the square has been scrolled. The further the square moves, the more it is scaled up.
The duration of a scroll-triggered animation is a length of time, whereas the duration of a scroll-bound animation is a distance. A scroll-triggered animation may be 2 seconds long and a scroll-bound animation might be 200px long.
This means that the user can control the speed of a scroll-bound animation by changing the speed at which they scroll, but they cannot change the speed of a scroll-triggered animation because it is a predetermined length of time.
- Scroll event: the scroll event fires each time a user scrolls the page. Used for scroll-triggered animations and scroll-bound animations to update the page. Used in combination with
window.scrollTop. An example of a library that uses the scroll event to power scroll animations is ScrollMagic.
- requestAnimationFrame: Can be used as a generally more performant alternative to the scroll event to update elements before browser repaints. Used in combination with
window.scrollTop. An example of a library that uses requestAnimationFrame to power scroll animations is Lax.js.
You can create scroll-bound animations from scratch, but if you're doing something complex it's likely that you'll want to use a library to create them. It makes the implementation easier and less repetitive.
The three best libraries to use for scroll-bound animations are Lax.js, ScrollMagic, and GSAP Scroll Trigger.
If you want to learn how to create a scroll-bound animation from scratch, you can check out my tutorial for how to fade an element out on scroll.
Learning scroll animations
All scroll-based animations provide an opportunity to add visual interest and enhance the storytelling on a page, but they should be used sparingly. They should enhance an experience, not detract from it.
Too many animations will detract from your content. Whether you're creating scroll-triggered animations or scroll-bound animations, make sure they are used sparingly and effectively.
Be sure to check out the rest of my scroll animation articles.
Drop your email below and I'll send you my Guide to Scroll-Triggered Animation Libraries so you can choose the exact right one for your needs and skill level.