Svelte Scroll Tracker Demo

A Svelte component driving animations based on scroll progress across the viewport.

Scroll down to see different examples powered by the --scroll-progress CSS variable (0 to 1).

Fade & Slide Up

0-50% Journey (default)

Smooth Entrance

The most basic effect, fading and sliding into view smoothly across the viewport scroll.

Nature placeholder

Scale In & Translate Up

0-40% Journey

Quick Growth

This element scales in and moves up, completing its animation by the time it reaches the middle of the screen.

fly in from the side

0-50% Journey (default)

Smooth Side Entrance

A horizontal slide

Color Change

30%-100% Journey

Mid-Scroll Shift

The background color shifts only during the middle part of its journey across the viewport.

Horizontal Reveal

10%-60% Journey

Unveiling Content

Using clip-path to reveal the content horizontally as you scroll.

clip-path: inset(0 calc(100% - 100% * var(--scroll-progress)) 0 0);

Width Expansion

0-50% Journey (default)

Expanding Box

The container itself expands horizontally based on scroll progress.

SVG Draw

10%-60% Journey

Animating SVG stroke properties.

Word Reveal

Staggered, 20%-50% Journey

Each word starts obscured by a block. As you scroll, the block covering each word shrinks away horizontally, revealing the text. This entire sequence completes as the paragraph reaches the middle of the viewport.

Use it programmatically

Trigger at 50% Journey

Progress: 0%

Experiment with the startThreshold and endThreshold props!