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.

Offset-based timeline

The offset-based timeline 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.

Options

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