Grid-to-List Morph on Scroll
A pinned gallery of eight tiles morphs from a four-column grid into an index list as you scroll: Flip records the grid, the layout class flips to list, and Flip.from() is scrubbed inside a paused timeline while titles and hairline rules stagger in.
- Scroll
- scroll · storytelling-layout
- gsap
- scrolltrigger
- flip
- advanced
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1597 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.
Featured light Scatter to Grid Flip
Twelve image tiles start thrown across a pinned viewport at random positions and angles, then glide, rotate and scale into a neat 4×3 grid as you scroll — both layouts are measured and Flip.fit computes the exact transform for each tile.
- gsap
- scrolltrigger
- flip
light Scroll-Expanding Accordion Images
Five tall image panels sit in a pinned row; scrolling opens them one after another — the active panel widens to take half the row while the others compress to slivers — using only transforms and clip-path, with the caption rising inside the open panel.
- gsap
- scrolltrigger
Featured light Grid Item Expand to Fullscreen
A 3×2 grid pins; as you scroll the centre tile grows (a measured clip-path inset) until it fills the viewport while the other five tiles slide out of frame, then a headline rises over the full-bleed image. Scroll up and it folds back into the grid.
- gsap
- scrolltrigger
Featured medium Rotating Image Ring
Twelve portrait images stand on a 3D ring (rotateY i×30° translateZ R) inside a perspective stage; a pinned section turns the ring with the scroll while the frame facing you is named in a caption and tracked by a progress bar.
- gsap
- scrolltrigger