Modal Scale Dialog
A museum booking page: the backdrop fades to 0.7 while the dialog rises 16px and scales 0.92 → 1 (expo.out, starting 0.2s before the dim finishes); its rows stagger in. Closing plays a quicker scale-fade out before the layer hides and focus returns.
- Layout
- gsap
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1251 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 Sheet Modal Drag Dismiss
A bottom sheet springs to half height while the page behind scales to .94 and rounds its corners; drag the handle with mouse or finger: rubber-band above the top, velocity-projected snap to full / half, or fling down to dismiss. Esc closes; focus is trapped.
- gsap
light Accordion with Smooth Height
Five hairline-ruled FAQ items open with a true height-from-zero-to-auto tween; the plus rotates into a cross, the copy slides up a beat later, the index turns lime and the previously open item closes at the same time.
- gsap
light Before / After Drag Slider
A 16:10 comparison frame with a warm graded 'after' and a flat, desaturated 'before' derived from it on canvas; a lime Draggable handle clips the top layer, with keyboard, click-to-jump and an intro sweep to 60% and back.
- gsap
- canvas2d
light Bento Grid with Flip Filtering
A bento-style grid of nine mixed-span tiles is filtered by a pill bar; GSAP Flip records the layout, toggles visibility, then glides every surviving tile into its new slot while leaving tiles shrink away.
- gsap
- flip