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
Smooth Entrance
The most basic effect, fading and sliding into view smoothly across the viewport scroll.
Scale In & Translate Up
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
Smooth Side Entrance
A horizontal slide
Color Change
Mid-Scroll Shift
The background color shifts only during the middle part of its journey across the viewport.
Horizontal Reveal
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
Expanding Box
The container itself expands horizontally based on scroll progress.
SVG Draw
Animating SVG stroke properties.
Word Reveal
Staggered, 20%-50% JourneyEach 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.