SlowMo

gsap.registerPlugin(EasePack) 

// we're starting at a scale of 1 and animating to 2, so pass those into config()...
gsap.to("#image", { duration: 1, scale: 2, ease: "expoScale(1, 2)" });

描述​

SlowMo 是一种可配置的缓动函数，可以产生慢动作效果，初期减速，中间按一定比例（你可以自定义）保持线性运动，最后再次加速；它非常适合用于像将文字放大进入屏幕、平稳移动足够长时间供人阅读、然后再缩小离开屏幕这样的效果。

没有 SlowMo 的情况下，动画师通常会尝试通过顺序执行三个补间动画来实现相同的效果：第一个使用缓出（ease-out）.out，然后第二个不使用缓动（ease: "none"参数设为.in，最后一个再使用缓入（ease-in）。但问题在于，这些缓动之间无法平滑过渡，因此你会在连接处看到速度上的突变。SlowMo 解决了这个问题，并让你完全控制两端缓动的强度以及中间线性运动部分所占的比例。

第一个参数linearRatiolinearRatio

powerpower决定了两端缓动的强度。如果你设置的值大于 1，实际上会对中间的线性部分产生反向效果，从而创造出有趣的变化。默认值为 0.7。

提供了一种简便方式来创建与正常 SlowMo 动画同步的伴行动画。例如，假设你有一个 SlowMo 动画，用于将一些文字放大进入屏幕，在中间保持一段线性运动，然后再次缩小离开屏幕；但你还想在位置动画开始和结束时对文字的透明度（alpha）进行补间动画。通常情况下，你需要手动创建两个独立的 alpha 动画：一个用于开头的淡入，另一个用于结尾的淡出，并需要手动计算它们的持续时间以确保在开始线性运动之前完成淡入，并在线性运动完成后立即开始淡出。但为了简化整个流程，你只需为 alpha 创建一个单独的动画即可，并使用相同的持续时间以及将yoyoModeyoyoModeyoyoModeyoyoModetrue.

示例代码​

//use the default SlowMo ease (linearRatio of 0.7 and power of 0.7)
gsap.to(myText, {duration: 5, x: 600, ease: "slow"});

//this gives the exact same effect as the line above, but uses a different syntax
gsap.to(myText, {duration: 5, x: 600, ease: "slow(0.5, 0.8)"});

//now let's create an opacity tween that syncs with the above positional tween, fading it in at the beginning and out at the end
gsap.from(myText, {duration: 5, opacity: 0, ease: "slow(0.5, 0.8, true)"});