CustomWiggle Icons — Free GSAP Wiggle Ease Snippet

The attention wiggle — a bell shaking for unread notifications, a cart nudging after add-to-item — is usually hacked together with a dozen CSS keyframe stops. GSAP's CustomWiggle (free on the CDN since 3.13) reframes oscillation as an *easing curve*: an ease whose output swings between −1 and 1 a configured number of times before settling. This snippet wiggles three icons on three different properties from one registered ease, with buttons switching the amplitude envelope live.

An ease that oscillates changes everything

Normal eases travel from 0 to 1. CustomWiggle.create('wig', { wiggles: 8 }) registers an ease that crosses zero sixteen times, overshooting alternately positive and negative. Applied to a tween targeting rotation: 14, the element swings between roughly +14° and −14°, decaying per the envelope, and lands exactly at the target. One tween line replaces the keyframe list — and because it's an ease, it composes with any property, duration, or timeline position like every other GSAP curve.

type is the amplitude envelope

The three buttons rebuild the ease with different type values, and the personality change is dramatic. easeOut starts at full amplitude and decays — a struck bell, the natural physical read. uniform holds constant amplitude to the end then stops — mechanical, alarm-like, deliberately artificial. random perturbs the oscillation pattern — organic jitter, closer to shivering than ringing. (easeInOut and anticipate, which winds up backward first, round out the set.) Same wiggle count, three different creatures.

One ease, three properties

The bell wiggles rotation (±14°, the canonical ring), the heart wiggles scale (a flutter around its size), and the cart wiggles x (a side-to-side nudge). Because the ease is registered by name, each icon's handler is a three-line fromTo — the oscillation logic lives in the curve, not in per-icon code. This is the pattern worth internalizing: encode motion *character* in a named ease once, then apply it anywhere.

killTweensOf makes mashing safe

Each wiggle starts by killing the element's running tweens and re-asserting the zero state via fromTo. Rapid clicks restart the shake cleanly instead of stacking oscillations into chaos — the same interrupt-safety idiom as every replayable effect, doubly important for an interaction users *will* spam.

Why rotation origin isn't touched here

Icons rotate around their centers, which reads fine at ±14°. For a hanging-bell feel, set transformOrigin: '50% 0%' so it swings from its mount point — one line, and the same ease produces pendulum physics instead of center spin.

Wiggles are the sibling of bounces

CustomWiggle is built on CustomEase (as is CustomBounce) — both are generators for curve families too tedious to draw by hand. Bounce is asymmetric gravity; wiggle is symmetric oscillation. Between them and raw CustomEase paths, virtually any motion personality is expressible as a named, reusable ease.

Customizing it

Tune wiggles (3 is a nudge, 15 is a rattle), pair a wiggle with a color pulse on the badge, or trigger on real events — incoming websocket messages wiggling the bell is the production use. Related: attention motion in notification bell, impact physics in custom bounce ball, curve shopping in gsap ease gallery, and click celebration in like burst button.