The three concepts behind every scroll animation

by Nick Ciliak on

Scroll-based animations can be visually complex, but behind all of them are just three basic concepts. You can create any scroll animation if you understand these three things and how to implement them.

The three concepts are: triggers, pinning, and tweening. Most scroll animations rely on triggers. Some rely on triggers only, and others rely on all three. But if you understand all three, you can create any scroll animation effect.

Let’s break each concept down, then see how they apply to real-world examples.

1. Triggers

A trigger is an event that initiates a scroll animation or effect. Here are the most common triggers used in scroll animations:

When a trigger is detected, we can apply any transition, animation, or effect to an element. In many cases, this is as simple as adding or removing a class from an element. In other cases, it can tell an element to start tweening.

Most triggers are based on the element being animated, but they don't have to be. For example, a trigger can also be the user reaching the end of a page or scrolling to the top of a page. Or it could be when two elements overlap or when the user changes scroll direction.

Is scrolling itself a trigger? Not really. Scrolling is implicit in scroll-based animations, so scrolling itself is not a trigger. For our purposes, a trigger is a specific occurrence related to scrolling, not the act of scrolling itself.

2. Pinning

Pinning is a scroll-triggered effect where a freely scrolling element becomes fixed at a certain scroll position. It remains fixed indefinitely or until a specified point. This effect is often combined with animations, but by definition does not represent an animated effect.

Pinning is important to scroll animations because it allows us to manipulate time as a user scrolls. For example, an element can enter the viewport by scrolling and be pinned as other elements continue to scroll. The timeline of one element is altered while the rest are not. This contrast gives the opportunity to create interest, draw attention, and tell a story.

3. Tweening

Tweening is an animation concept where frames are generated from the start point to the end point of an animation and played in succession to create the illusion of motion. The frames are generated by interpolating interstitial values based on a duration input.

For scroll-triggered animations, where an animation is played independently of the scroll position, the duration of the animation is a length of time. For example, a fade-in animation that takes 3 seconds. The 3 seconds is fixed, so the browser can generate the frames for us without any additional user input. This is commonly done with a CSS animation or transition.

For a scroll-bound animation, where the animation state is bound to the user's scroll position, the duration of the animation is a distance. This means that the actual animation can be fast or slow depending on the speed the user scrolls. For example, a fade-in animation that occurs over the scroll-distance of 300px can take 100ms or 1s. It all depends on the speed of scrolling. That means that for scroll-bound animations, inbetween frames must be generated on demand based on the user's scroll position.

Putting it all together

Using triggers, pinning, and tweening, you can create any scroll-based animation or effect. Let's take a look at two real-world examples and see how each concept manifests in them.

The first example is sketch.com. This page uses two of the three concepts: triggers and tweening. Some elements on the page fade into view (and move up slightly) when they are scrolled into the viewport. This is an example of a trigger.

It also uses tweening: the section that says "Open up the design process" has an illustration that transforms as you scroll. The more you scroll, the more the animation proceeds.

Another example of these concepts is stories.google. This page has a great example of pinning: notice that when you scroll, the phone in the center of the page becomes fixed as the rest of the page continues to scroll around it. It stays pinned to draw focus for a bit, then it unpins and continues to scroll offscreen.

This page also uses triggers (elements fade in when a point is reached, the background color changes when a point is reached) and tweening (the phone changes in scale as you scroll and the screens at the bottom are translated at different speeds).

As you can see, these concepts can be found in scroll animations all over the web. While the results can be very different and imaginative, the three concepts of triggers, pinning, and tweening will come up again and again. Once you learn to implement each of them, you can create any scroll animation you want.