Examples

From / To

Use the from and to options to define the start and end states of the animation.

Keyframes

Use the keyframes option to define multiple animation steps. Each keyframe can have an optional offset (0-1) to control when it occurs and an easing to control the interpolation to the next keyframe.

Play range

Use the playRange option to control when the animation starts and ends relative to the scroll progress. The value is an array of two numbers between 0 and 1.

Easing

Use the easing option to control the animation curve. The value is a cubic-bezier array [x1, y1, x2, y2].

Damp factor

Use the dampFactor option to add smoothing to the animation. Lower values create smoother, slower animations. The default value is 0.1.

Debug

Use the withScrollAnimationDebug decorator and the debug option to display visual markers showing the start/end positions and current progress. This is useful during development to understand how the scroll animation is triggered. The decorator allows the debug code to be tree-shaken from production bundles.

Offset

Use the offset option on ScrollAnimationTimeline to control when the animation starts and ends relative to the viewport.

The offset format is "<targetStart> <viewportStart> / <targetEnd> <viewportEnd>" where:

• targetStart / targetEnd: position on the timeline element (start = top, center = middle, end = bottom)
• viewportStart / viewportEnd: position on the viewport (start = top, center = middle, end = bottom)

You can use named values (start, center, end), numbers between 0 and 1, or percentages.

Default offset

Value: "start end / end start" (default)

The animation starts when the start (top) of the timeline reaches the end (bottom) of the viewport. The animation ends when the end (bottom) of the timeline reaches the start (top) of the viewport.

This means the animation plays while any part of the timeline is visible in the viewport.

Centered offset

Value: "start center / end center"

The animation starts when the start (top) of the timeline reaches the center of the viewport. The animation ends when the end (bottom) of the timeline reaches the center of the viewport.

This means the animation plays while the timeline crosses the middle of the screen.

Top section offset

Value: "start start / end start"

The animation starts when the start (top) of the timeline reaches the start (top) of the viewport. The animation ends when the end (bottom) of the timeline reaches the start (top) of the viewport.

This means the animation plays while the timeline is pinned at the top of the viewport.

Numbered offset

Value: "0 0.8 / 1 0.2"

The animation starts when the start (0 = top) of the timeline reaches 80% (0.8) from the top of the viewport. The animation ends when the end (1 = bottom) of the timeline reaches 20% (0.2) from the top of the viewport.

Using numbers between 0 and 1 gives you precise control over the trigger positions.

Percentage offset

Value: "0 75% / 100% 25%"

The animation starts when the start (0 = top) of the timeline reaches 75% from the top of the viewport. The animation ends when the end (100% = bottom) of the timeline reaches 25% from the top of the viewport.

Percentages work the same as numbers but can be more readable.

Cards

Animate multiple elements within a single timeline.

Text

Animate text characters individually.

Sticky animation

Use the sticky CSS property to create a sticky element that animates as you scroll.

Staggered animation

Use the playRange option with a value following the pattern [index, length, step] to add a staggered effect on multiple components.

Sequentially played animation

Like the staggered animation, use the pattern [index, length, step] for the playRange option, but set the step value to be 1 / length to make each animation in the staggered list play one after another.

Parallax

You can easily implement a parallax effect with images by combining the ScrollAnimationTarget class with the Figure component.

Here, we even use the ImageGrid organism to quickly have a nice listing layout. We are able to configure it to wrap each image in a Parallax component.