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.
- Layout
- gsap
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1287 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 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.
- gsap
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 Mega Menu Reveal
Hover or focus "Products" and a full-width panel unfolds from under the bar with a clip-path curtain; three columns of links rise in with a tight stagger and a featured card slides in from the right. Keyboard-complete, and an accordion on phones.
- 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