Scroll trigger

Create a scroll-linked animations activated as the user scrolls through the page.

Overview

A scroll trigger animates properties as the user scrolls the page. The animation begins playing continuously when the element becomes visible in the viewport at the bottom of the screen and finishes when it reaches the top of the viewport. You can customize the offsets for these animations in the trigger’s offset parameters.

This trigger behavior is different than the Inview trigger, because the scroll is animating the element during the scroll, while the inview executes the animation once it becomes visible in the viewport.

The initial value of CSS property is computed automatically (unless explicitly defined) and animated into the final value that is defined in the property parentheses ().

Syntax

To activate the scroll trigger, use the scroll keyword. A CSS property is animated when the element receives the user scrolls the page.

Examples

These examples show the usage of the scroll trigger in the various timeline types together with the combination with the different triggers.

Discrete timeline

Discrete timeline is the basic timeline that animate the properties when the scroll trigger is executed on the element.

Sequenced timeline

Note: A scroll trigger (as well as a pointer / mouse) automatically converts the sequenced timeline into an offset one, because they are coordinate-based and the animation playback is relative to the viewport and not the time.

By default, the scroll trigger’s sequenced animation steps are divided according to their number. For example, if you have two steps (shown below), the timeline progress will be split two parts, with each step playing over 50% of the viewport.” To customize this behavior, check the sequenced timeline offsets parameters.

Offset-based timeline

Offset-based timeline specify the playback of animation steps according to the specified offsets.

Asynchronous playback v3.1.0

The offset timeline allows you to animate steps asynchronously - they can run in parallel. Use {start}%-{end}%:[] syntax to set the start and end offset of each steps. Steps can even overlap!

Combination

The scroll trigger can be combined with any other available triggers.

Parameters

Trigger can be customized with the parameters that are defined within its parentheses ().

Offsets

The start and end offsets limits when the scroll trigger should start or finish. The reference point of the offset parameter is at the bottom of the screen. So the 0% value is very bottom, 50% is the half and the 100% is the top of the screen. You can also use the absolute px values instead of relative percentage-based ones.

start offset

By default, the start offset is set to 0%, meaning the animation trigger point is positioned at the bottom of the screen. Adjusting this value allows you to modify when the animation starts, triggering the animation later as the element reaches the specified offset.

Name Value Default Example Shorthand
start {number}{% | px} 0% scroll(start: 10%) scroll(10%)
<!-- Start the animation when the element reaches `50%` from the bottom of the screen -->

<!-- Shorthand -->

<!-- Start the animation when the element reaches `100px` from the bottom of the screen -->

<!-- Shorthand -->
end offset

By default, the end offset is set to 100%, meaning the animation trigger point is at the top of the screen when the animation ends. Changing this value adjusts when the animation completes, causing the animation to end earlier as the element reaches the specified offset.

Name Value Default Example Shorthand
end {number}{% | px} 100% scroll(end: 10%) -
<!-- Stop the animation when the element reaches `50%` from the bottom of the screen -->

<!-- Stop the animation when the element reaches `300px` from the bottom of the screen -->

<!-- No shorthand -->
Combination

You can also combine the start and end offsets to fine-tune when the animation is triggered and completed within the viewport.

Name Value Default Example Shorthand
start | end {number}{% | px} 0% | 100% scroll(start: 20%, end: 50%) scroll(10%, 50%)
<!-- Revert the animation when the element reaches `50%` from the bottom of the screen -->

<!-- Shorthand -->

<!-- Revert the animation when the element reaches `100px` from the bottom of the screen -->

<!-- Shorthand -->