How to make scroll animations

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.

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, 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 animations are created using a combination of CSS and JavaScript or in some cases JavaScript only. If that's what you want to create, check out this post: How to trigger a CSS animation on scroll.

The JavaScript is used to track the position of an element and trigger the animation. When the element enters the viewport, a CSS transition or animation is triggered by adding a class to the element with JavaScript.

It's recommended to use CSS for scroll-triggered animations, but you can also create the animation using JavaScript.

You can also use a scroll animation library to use JavaScript to add and remove classes to elements when they are scrolled into view. There are lots of options for this, including Sal.js, AOS, and Josh.js.

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.

Scroll-bound animations

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-bound animations are almost always made using JavaScript. Scroll-bound animations can be powered by a few different technologies:

• 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

If you’re just getting started with scroll-based animations, or have limited JavaScript experience, I recommend starting with scroll-triggered animations. They are generally easier to implement than scroll-bound animations, especially if you already have experience with CSS animations.

Scroll-bound animations generally require more JavaScript knowledge to implement. Some libraries offer syntax similar to CSS animations in order to create the animations, which can lower the learning curve for some people.

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.