Playground · 12 demos
CSS Scroll Animations Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Scroll Animations collection for the gallery view with code panels.
01 CSS + JS
Parallax Cosmos
A 320vh sticky scene with six depth layers and a canvas starfield drifting at independent speeds, depth labels, and a scroll-progress bar.
Open
02 CSS + JS
Kinetic Typography
Five full-screen type blocks where words slide, stagger, and settle into place as each panel enters the viewport.
Open
03 CSS + JS
Staggered Grid Waves
Four waves of nine-card grids, each wave entering with a different physics — rise, scale, rotate, and depth burst.
Open
04 CSS + JS
Animated Data Stats
Counters that ease toward their value, eight scroll-triggered progress bars, and five SVG ring gauges that fill on reveal.
Open
05 CSS + JS
Clip-Path Reveals
Six full-width panels each unveiled with a different clip-path wipe — bottom-up, horizontal, radial burst, drop, inset zoom.
Open
06 CSS + JS
3D Card Entrances
Four rows of cards that rotate, flip, and burst in from 3D space on scroll, then respond to live mouse tilt.
Open
07 CSS + JS
Scroll Reveal Suite
An architecture-studio portfolio showcasing six reveal techniques: mask-slide, lift, scale-curtain, clip, wipe, and blur dissolve.
Open
08 CSS + JS
Triple Scroll Progress
A long-form essay reader with three synced progress indicators — a top gradient bar, a chapter rail, and a circular reading-time orb.
Open
09 CSS + JS
Staggered Portfolio List
A work index whose rows arrive one at a time with a staggered slide-up, plus a hover sweep and arrow nudge.
Open
10 CSS + JS
Mountain Parallax Layers
A sticky 340vh landscape where five mountain ridges, clouds, and a rising sun move at independent parallax speeds.
Open
11 CSS + JS
Cinematic Image Wipe
Full-viewport frames revealed by a directional clip-path wipe that alternates side to side, captions riding in a beat behind.
Open
12 CSS + JS
Sticky Product Tour
Classic scrollytelling — a sticky device on the left swaps its screen to match each step as the copy scrolls past on the right.
Open