CSS Scroll-Timeline Reveal
Animated by CSS scroll-driven animations alone: view()-timeline reveals with a custom-property stagger, a scroll()-driven progress bar, and a 300vh sticky chapter whose lines and 0–100% counter run on a named view-timeline with animation-range.
- Scroll
- scroll · css-native
- css-only
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1711 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light CSS View-Timeline Parallax
A five-layer procedural landscape parallaxes with zero JavaScript: each layer rides its own view() timeline with a different translateY range, a sticky caption fades across the scene's cover range, and @supports keeps unsupported browsers on a static scene.
- css-only
light Hide / Show Header on Scroll
A fixed header slides out of view when you scroll down faster than a velocity threshold and slides back the moment you scroll up; past a set offset it shrinks into a compact strip with a frosted backdrop.
- gsap
- scrolltrigger
Featured WebGL Camera Fly-through on Scroll
A pinned, scrubbed scroll flies a Three.js camera along a Catmull-Rom spline through floating prints, accent rings and drifting particles, aiming a little ahead of itself; fog keeps the far work soft and DOM captions land at four waypoints.
- gsap
- scrolltrigger
- threejs
- glsl
Featured light Fullscreen Section Snap
GSAP Observer turns every wheel tick, swipe or arrow key into one full-height section change — a 1s expo.inOut scroll, a staggered content reveal on arrival, a rolling '03 / 06' counter — and refuses to over-scroll past the ends.
- gsap
- scrolltrigger