Chapter 154: ExpoScaleEase
Core Idea
ExpoScaleEase (from the free EasePack) corrects a visual artifact where scaling an object with a plain linear or other ease looks like it's changing speed, by bending the easing curve to compensate.
Key Concepts
- expoScale(startScale, endScale, ease?): ease string factory; needs the tween's actual starting and ending scale values to compute the right curve.
- 3rd parameter: an optional ease to bend around the exponential compensation (default
"none"), e.g. "expoScale(0.5, 3, power2.inOut)".
- Scale values passed in must be non-zero (use a tiny value like
0.01 instead of 0); extremely tiny values (like 0.00000001) waste most of the tween on imperceptible sizes.
- Requires
gsap.registerPlugin(EasePack).
Code Examples
gsap.registerPlugin(EasePack);
gsap.to("#image", { duration: 1, scale: 2, ease: "expoScale(1, 2)" });
- What it demonstrates: pass the tween's real start/end scale into the ease string so it can bend the curve accordingly.
Anti-patterns
- Passing
0 as a scale endpoint: breaks the underlying math; use a small non-zero number instead.
Key Takeaways
- Use ExpoScaleEase whenever animating
scale/scaleX/scaleY and the motion looks like it "speeds up" unexpectedly with a normal ease.
- The start/end scale values fed into the ease string must match the tween's actual scale range.
- It's part of EasePack alongside RoughEase and SlowMo, all requiring the same plugin registration.
Connects To
- RoughEase, SlowMo: sibling free eases shipped in EasePack.