Chapter 156: SlowMo

Core Idea

SlowMo (EasePack) produces a decelerate-linear-accelerate motion profile in a single smooth ease, avoiding the visible velocity "joints" that happen when chaining three separate eased tweens to fake the same effect.

Key Concepts

• linearRatio (1st param, 0-1): proportion of the tween that moves at constant linear speed in the middle; the remainder splits evenly between the initial ease-out and final ease-in. Default 0.7.
• power (2nd param): strength of the ease at each end; values above 1 can reverse the linear middle section for unusual effects. Default 0.7.
• yoyoMode (3rd param, boolean): when true, produces a companion ease shape suited for a second tween (e.g. opacity) that fades in during the deceleration phase and fades out during the acceleration phase, synced to the same duration as the main SlowMo tween.
• Requires gsap.registerPlugin(EasePack).

Code Examples

gsap.to(myText, { duration: 5, x: 600, ease: "slow" });
gsap.to(myText, { duration: 5, x: 600, ease: "slow(0.5, 0.8)" });

// a companion opacity tween synced to the motion above
gsap.from(myText, { duration: 5, opacity: 0, ease: "slow(0.5, 0.8, true)" });

• What it demonstrates: pairing a positional SlowMo tween with an opacity tween of the same duration, using yoyoMode to sync the fade to the deceleration/acceleration phases.

Key Takeaways

1. SlowMo replaces a 3-tween ease-out/linear/ease-in sequence with one continuous ease, avoiding velocity discontinuities.
2. yoyoMode is the key to syncing a secondary property (like opacity) to the same timing without manual duration math.
3. Good fit for "zoom text on screen, hold, zoom off" style effects.

Connects To

• ExpoScaleEase, RoughEase: sibling EasePack eases.