Chapter 157: SteppedEase

Core Idea

SteppedEase (built into GSAP's core, no extra plugin needed) makes a tween jump through a fixed number of discrete steps instead of transitioning smoothly, useful for effects like a counter or a sprite-sheet-style animation.

Key Concepts

• steps(n): ease string factory taking the number of discrete steps.
• SteppedEase's underlying equation always returns values between 0 and 1 and is built specifically for GSAP, so it isn't meant to be reused with other animation engines.

Code Examples

gsap.to(obj, { duration: 2, x: 100, ease: "steps(5)" });

• What it demonstrates: x jumps through 5 discrete values (20, 40, 60, 80, 100) over 2 seconds instead of moving continuously.

Key Takeaways

1. No registerPlugin call needed — SteppedEase ships in GSAP core.
2. Use it for deliberately "chunky" motion (counters, frame-by-frame sprite effects), not smooth animation.

Connects To

• CustomEase: for arbitrary smooth curves, as opposed to SteppedEase's discrete jumps.