Chapter 153: CustomWiggle

Core Idea

CustomWiggle is a paid GSAP plugin (built on CustomEase) that generates an oscillating back-and-forth ease, useful for rotation/position "wiggle" or "shake" effects, with configurable wiggle count and shape.

Key Concepts

• CustomWiggle.create(id, vars): registers a wiggle ease; requires CustomEase to be registered too.
• wiggles: integer, number of back-and-forth oscillations. Default 10.
• type: one of "easeOut" | "easeInOut" | "anticipate" | "uniform" | "random", a preset shape for the wiggle. Default "easeOut".
• amplitudeEase / timingEase: advanced overrides for the amplitude decay curve and the time-plotting curve of the waves respectively; setting either overrides type.
• String shorthand: "wiggle(15)" or "wiggle({type:anticipate, wiggles:8})".
• The actual strength/distance of the wiggle comes from the tweened property's own start/end values, not from a CustomWiggle option.

Code Examples

gsap.registerPlugin(CustomEase, CustomWiggle);

CustomWiggle.create("myWiggle", { wiggles: 6 });
gsap.to(".class", { duration: 2, rotation: 30, ease: "myWiggle" });

• What it demonstrates: a rotation wiggles to 30° and back the same amount, ending where it started.

Key Takeaways

1. Wiggling isn't limited to rotation — any numeric property works, including combining randomized x/y wiggles for a swarm-like effect.
2. type presets are convenience combinations of amplitudeEase/timingEase; use the latter two directly for fine control.
3. CustomWiggle always requires CustomEase to also be registered.

Connects To

• CustomEase: base plugin CustomWiggle extends.
• CustomBounce: sibling paid ease plugin with an equivalent create()/register pattern.