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
Sequenced timeline animates the CSS properties in the sequence of steps using the scroll trigger.
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 combine the CSS-offsets with the sequence of steps to animate the properties, triggered by a scroll action.
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%) |
<!-- 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 | Example | Default | Shorthand |
|---|---|---|---|---|
end |
{number}{% | px} |
100% |
scroll(end: 10%) |
- |
<!-- 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 | Example | Default | Shorthand |
|---|---|---|---|---|
start | end |
{number}{% | px} |
0% | 100% |
scroll(start: 20%, end: 50%) |
scroll(10%, 50%) |
<!-- Shorthand -->
<!-- Revert the animation when the element reaches `100px` from the bottom of the screen -->
<!-- Shorthand -->
Sequenced offsets
The scroll trigger (as well as mouse and pointer triggers) is coordinate-based, which means it behaves differently from the time-based ones. As a result, the steps in the sequenced timeline must be defined using the start and end offsets.
Syntax
To define the steps, you need to specify the start and end offsets for each step inside brackets [], separated by a comma ,. Each item in the brackets represents a single step. The number of steps determines the number of items in each start and end offset brackets. Offsets can be defined relative to the viewport using percentages % or as absolute scrolled values using px.
Default
By default, the timeline is divided by the number of steps. For example, if there are two steps, the timeline’s 100% is split into two 50% offsets.
<!-- Default behavior can be defined like this -->
<!-- Shorthand -->
Custom
You can customize the starting and ending offsets for each step, as shown in this example. The first step starts at 10% of the viewport and ends at 80%. The second step begins at 80%, right where the first one finishes, and ends at 100% of the viewport.
<!-- Shorthand -->
Parallel
The advantage of using offset-defined sequences for coordinate-based triggers is that multiple steps can run in parallel, meaning steps don’t have to wait for one another to finish. In this example, the first step starts immediately at 0% of the viewport, while the second step begins right after that at 15%. Both steps run together in parallel until the first finishes at 75%. The second step then continues and ends at 100% of the viewport.
<!-- Shorthand -->