Chapter 155: RoughEase

Core Idea

RoughEase (from EasePack) produces a jagged/jittery motion instead of a smooth transition, useful for shake, static, or glitch-style effects, by plotting a configurable number of randomized points around a template curve.

Key Concepts

• clamp: keeps all plotted points within the tween's start/end value range when true; when false, points can briefly overshoot. Default false.
• points: how many points are plotted along the ease — more points = more frequent jitter. Default 20.
• randomize: true randomizes point placement (the "rough" look); false zig-zags evenly, often combined with taper. Default true.
• strength: how far points can wander from the template curve. Default 1.
• taper: "in" | "out" | "both" | "none" — fades the roughness toward the start/end/both. Default "none".
• template: an ease used as the underlying shape the rough points wander around. Default "none".
• Requires gsap.registerPlugin(EasePack).

Code Examples

gsap.from(element, { duration: 1, opacity: 0, ease: "rough" });

gsap.to(element, {
  duration: 2, y: 300,
  ease: "rough({strength: 3, points: 50, template: strong.inOut, taper: both, randomize: false})",
});

• What it demonstrates: default rough ease vs. a fully customized one combining a template curve with tapered, non-randomized roughness.

Key Takeaways

1. randomize: false + taper gives an even, controlled zig-zag rather than pure noise.
2. clamp: true is important when the roughness must never visually exceed the tween's target range.
3. template lets RoughEase follow the general shape of any other ease while still looking rough.

Connects To

• ExpoScaleEase, SlowMo: sibling eases shipped in the same EasePack.