gsapでアニメーションのタイミングをハンドリングする方法

2021年8月19日gsap

特定のアニメーションが始まったとき、終わったときなど、アニメーションのタイミングをgsapでハンドリングする方法を紹介します。

gsapでアニメーションのタイミングをハンドリングする方法

// event callbacks
const img1 = document.querySelector('.img1');
gsap.to(img1, {
  x: 100,
  duration: 1,
  repeat: 1,
  onComplete: () => { console.log('onComplete'); },
  onStart: () => { console.log('onStart'); },
  onUpdate: () => { console.log('onUpdate'); },
  onRepeat: () => { console.log('onRepeat'); },
})

gsapを使えるようにした状態で、上のコードを実行します。
すると、onComplete, onStart, onUpdate, onRepeatがいつ発火するかがわかります。

onCompleteは、アニメーションが完了したときです。
onStartはアニメーションが開始したときです。
onUpdateは、1ティック進むごとにイベントが発火します。
onRepeatは、リピートになるときです。