Scroll-based animations (also known as scroll animations) are website effects that are initiated by scrolling.
There are two types of scroll-based animations: scroll-triggered animations and scroll-bound animations. While both are initiated by scrolling, the result is fundamentally 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.
The example above 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.
A scroll-bound animation is an animation sequence that is bound to the scroll position, where the further a user scrolls, the more the animation executes. The scroll position acts as a timeline for the animation.
The example above 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.
How scroll animations are made
You don’t need to use a library to create scroll animations. However, there are many available because it makes the implementation easier and less repetitive. I analzyed over 30 libraries and wrote a guide to the top ten.
Scroll animations can be powered by a few different technologies:
- Intersection Observer API: can be used to power scroll-triggered animations. Gives you information about an element and callback as it enters or exits the viewport. An example of a library that uses Intersection Observer to power scroll animations is Josh.js.
- 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.
Learning scroll animations
All scroll-based animations provide an opportunity to add visual interest and enhance the story telling of a page, but they should be used sparingly. They should enhance an experience, not detract from it. Consider an up-scale restaurant: surely they’ll be playing music, whether live or recorded. But if the music is too loud, it will be distracting and take away from the main event, the food. The same can happen with scroll animations on your website: if there are too many or they are too dramatic, they will detract from your content. Make sure they are used sparingly and effectively.
Too. Many. Scroll. Libraries!
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.