5 new SVG animation effects in AutoKit: Shake, Bounce, Swing, Tada, Draw
AutoKit just got five new CSS animations and a new Strong category to put them in. The existing loops were either subtle (float, breathe, glow) or rotational (spin) — nothing for "look at me" moments. These five fill that gap.
Every animation below is a live SVG running on this page. Hover and stare for a few seconds to feel the rhythm.
Why a "Strong" category?
Most SVG loop animations are designed to be calm — a gentle float, a soft pulse — so they can run forever without annoying anyone. That's the right default for ambient motion, but it means there's no obvious tool for alerts, celebration, "hey, scroll down", or "that just happened" moments.
The Strong category is for animations that play hard, then rest. Each keyframe has a built-in pause so the loop doesn't feel like nagging. You get the attention pop, then visual silence, then the pop again.
Bell-style ring with diminishing oscillation
Quick rotational shake with diminishing amplitude — the kind of motion a notification bell makes when something arrives. The first wobble is the loudest, then it settles. Built-in rest period takes up 75% of the cycle so it doesn't keep ringing in your face.
Use it for: notifications, alerts, errors, anything that means "look at me right now."
Energetic vertical hop with squash-on-landing
Translate up, fall back, squash on landing (1.1× wide / 0.9× tall for that brief moment of impact), recover, rest. The squash sells the physics.
Use it for: CTAs, playful icons, anything that needs to feel like it has weight and energy. Best on rounded shapes — for tall thin elements the squash can look weird.
Pendulum from a top pivot
Rotates around the top center of the element — not the middle — so the bottom swings while the top stays put. Different from spin (which rotates fully) and wiggle (which jiggles in place).
Use it for: hanging signs, badges with strings, banners, dangling chains. Anything that visually "hangs from above."
Celebration burst — combined scale and rotate
The "ta-da!" feel — element scales down briefly (shrinking back like a wind-up), then bursts up to 110% with a small rotation wobble, then settles. The trophy sparks twinkle independently for celebration energy.
Use it for: success states, achievements, "task complete" moments, level-up animations, any positive event that deserves a beat of celebration.
Stroke that draws itself in
The classic "line draws itself" effect — animates stroke-dashoffset from full to zero so the path appears to be drawn by an invisible pen. Stagger multiple paths and you get a satisfying sequence.
Use it for: icons made of strokes (line art, sketches, signatures, checkmarks), anything where the act of drawing is itself the visual story.
Heads up: Draw only works on elements with a stroke attribute. If you apply it to a fill-only path the element will silently disappear. AutoKit shows a warning in the editor when this happens, and auto-shuffle skips drawIn for fill-only elements.
Other improvements in this update
While we were in there, a handful of quality-of-life changes shipped too:
- Categorized animation chips — entrance and loop animations are now grouped (Fade / Scale / Drop / Reveal / Effect for entrance; Subtle / Pulse / Spin / Playful / Strong for loop). Easier to find what you want.
- Clear all button — wipe every element to "no animation" with one click, instead of clicking none on each one.
- Bigger, smarter SVG thumbnail — the click target on the left panel now properly fits any aspect ratio (square, wide, tall) without breaking layout.
- Smarter shadow handling — AutoKit now detects elements with drop-shadow filters and skips animations that would clip them (like
clipReveal), preserving your filter effects. - Paste SVG — paste SVG markup directly from your clipboard instead of saving to a file first.
Related
- How to animate SVG icons without writing CSS — the original AutoKit walkthrough
- How to make animated isometric icons — combine IsoKit + AutoKit