What are scroll animations and how do you make them?

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.

Scroll-triggered animations

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.

Scroll-bound animations

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

Scroll-based animations are created using a combination of CSS and JavaScript or at times just Javascript. (However: it looks like we might be able to do it with just CSS in the future!)

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:

Learning scroll animations

If you’re just getting started with scroll-based animations, or have limited JavaScript experience, I recommend starting with scroll-triggered animations. They generally require less code and are easy to implement using a number of libraries. Many libraries offer the ability to define animations using custom HTML attributes and CSS classes. Scroll-triggered animations can be used easily with CSS animations.

Scroll-bound animations can be used with CSS animations but generally require more JavaScript. Some libraries offer syntax similar to CSS animations in order to tween elements. Scroll-bound animations generally provide more options for effects than CSS properties can currently provide.

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.