Eases﹙前端好好玩用 GSAP 做一個特效﹚

沒有設定 ease 屬性的動畫，動態平均

gsap.to('.box', {
  duration: 5,
  x: 500,
  repeat: -1,
});

gsap.to('.box', {

duration: 5,

x: 500,

repeat: -1,

});

與上方的 ease: 'Power1.easeOut' 比較，在沒有設定 ease 屬性的動畫，移動的動態就都很平均。

ease 屬性，主要是針對 duration 屬性 (動畫持續時間) 來設定，用來在動畫時間內對動態有著不同速度的呈現。

ease 設定 Power1.easeOut，在 duration 1 秒的時間內，動態會由在 1 秒間慢慢加速，到 1 秒停止。

gsap.to('.box', {
  duration: 5,
  x: 500,
  repeat: -1,
  ease: 'Power1.easeOut',
});

gsap.to('.box', {

duration: 5,

x: 500,

repeat: -1,

ease: 'Power1.easeOut',

});

ease: 'bounce.out' 的快慢動態就更強烈了。

gsap.to('.box', {
  duration: 5,
  x: 500,
  repeat: -1,
  ease: 'bounce.out',
});

gsap.to('.box', {

duration: 5,

x: 500,

repeat: -1,

ease: 'bounce.out',

});

資料來源：
(9)前端好好玩用 GSAP 做一個特效 – Eases
GSAP 官方網站的 Eases