Scroll-linked animations

Overview

The scroll-linked animations adjust in real-time based on your scroll position of the page. The are linked to the scrolled position and the screen offset. This is why the timeline animations of the scroll trigger are based on an offset system. They use the screen offset to determine the progress of each step.

Sequenced timeline

A sequenced timeline for scroll trigger differs from time-based ones (like hover, inview,…). As it was mentioned above, it uses the offsets to set the flow of each step. By default, the offsets are automatically computed according the number of steps, with the offset distributed accordingly across the screen.

Default example

As you know, TorusKit will by default distribute offsets evenly according the number of steps. This example contains two steps, so each step will take up the 50% of the screen.

Custom step offsets

We can rewrite the example above by using the start and end trigger parameters to create a custom step flow. The start parameter defines the start offset of each step in the array defined within square brackets []. Each percentage value in the array represents one step. Learn more about this syntax in the Scroll trigger quick overview or on the Scroll trigger documentation.

Multiple properties

You can add more then one property into each step.

Offset-based timeline

Unlike the sequenced timeline syntax described above, the offset-based one is the same as in the time-based triggers. Each step has its own percentage offset starting with a 0% and finished with 100%. You can set the initial values of the animation in 0% offset (step).

Example

This simple example shows how easy is to create a scroll-linked animation using TorusKit’s offset system. The fist step with 0% offset is used to set the initial (starting) values of all properties in the animation.

Multiple properties

As usual, you can add as many properties as you need to each step.

Custom initial values

If you need different initial (starting) value of your animation, just add them into the first 0% step.

Custom property duration

You can set a custom property-level transition duration. Because it is a scroll-driven animation, the duration means how long the property should animate after the scroll stops. In this type of animation timeline, steps are not depended on each other, and can run in parallel. You can see this in the example below, that the translateX has a custom 5s duration, but other steps are not waiting for it to finish, but are continuously animated according their offsets.

Options

Options definition differs from a time-based triggers so please check the Scroll trigger parameters for more.