Lottie Playback Controls
Three original Lottie animations authored as JSON: an upload story with intro, seamless loop and success segments in a full player (segments, speed, loop, scrub slider), a bell that rings on hover, a like burst on click and a scroll-scrubbed copy.
- SVG
- lottie
- gsap
- scrolltrigger
- svg
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1689 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 Border Trace
Four service cards and a pill CTA get an outline generated from their own size and radius; hovering or focusing draws it around the element (0.9s power2.inOut via DrawSVG) and leaving lets the tail chase it away. Clockwise, counter or split from one corner.
- gsap
- svg
light SVG Line Drawing
A still life, a release-loop diagram and a signature draw themselves stroke by stroke with DrawSVG (0% → 100%, 1.8s, 0.06s stagger), then fills and labels scale in. Draw on load, scrub with scroll, draw on hover and erase on leave, or toggle on click.
- gsap
- scrolltrigger
- svg
light SVG Shape Morph
Six icon pairs — play → pause, menu → close, sun → moon, heart → star, stop → record, next → done — and a large pebble that becomes a flower, star, drop, squircle or wave, all interpolated with MorphSVG on hover, click, scroll or a loop.
- gsap
- scrolltrigger
- svg
light Wobble and Swing
An SVG shop sign hangs from a bracket hook and sways idly; hover, focus or tap kicks it into a 12° swing that loses 38% per half-swing (0.9s, sine.inOut) until it settles, while bell, tag and heart icons rock around their own hinges.
- gsap
- svg