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.
- Scroll
- scroll · navigation-ui
- gsap
- scrolltrigger
- advanced
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1675 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 Section Dot Indicator
A fixed column of six dots tracks six full-height chapters: the active dot grows, turns accent and reveals its chapter name; hovering shows any label; clicking scrolls smoothly to that section with ScrollToPlugin.
- gsap
- scrolltrigger
light Header Style Transition
A transparent header floats over a full-bleed fjord hero; once 120px of content has slid under it, a blurred solid bar fades in, a hairline draws across, the CTA turns accent and the bar compacts — switched at a threshold, scrubbed, or at the hero edge.
- gsap
- scrolltrigger
light Magnetic Back-to-Top Button
A back-to-top disc pops in after 30% of the page, draws the page's scroll progress as a scrubbed SVG ring, leans towards the cursor with a magnetic pull and scrolls home in 1.2s with ScrollToPlugin.
- gsap
- scrolltrigger
light Theme Invert Section
A dark editorial page flips to a warm paper-white theme while the Daylight chapter is on screen: five CSS design tokens tween on the body, the artwork inverts and a fixed difference-blend logo stays legible through the flip.
- gsap
- scrolltrigger