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.
- SVG
- gsap
- 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. 1319 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 Pulse Rings
A courier-tracking map where three rings leave the live pin every 0.7s, growing to a 72px radius while fading from 70% to nothing; pressing the shop, home or a hotspot fires one quick burst of rings and a label.
- gsap
- svg
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 Continuous Spin
A text-ring badge, a two-arc loader, a 16-point seal and a pair of meshing gears turn forever on linear 360° loops. Pause, reverse and hover never snap: one signed timeScale eases through zero.
- gsap
- svg
light 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.
- lottie
- gsap
- scrolltrigger
- svg