gsapで複数のアニメーションをつなげるkeyframesの使い方

2021年8月18日gsap

gsapで複数のアニメーションをつなげるkeyframesの使い方を紹介します。

デモ

See the Pen
by Sosak (@Sosak2021)
on CodePen.

gsapのkeyframesの使い方

const img1 = document.querySelector('.img1');
// これはだめ、最後のものだけ適用される
// gsap.to(img1, { x:100 })
// gsap.to(img1, { y:100 })
// gsap.to(img1, { x:-100 })

gsap.to(img1, {
  keyframes: [
    {duration: 0.3, x: 100},
    {duration: 0.3, y: 100},
    {duration: 0.3, x: -100},
  ]
})

まず、上のように、単に羅列するだけでは、一番下の行のみ実行されてしまいます。
JavaScriptのアニメーションは即座に実行されず、実行される前に上書きされてしまうためです。
そのため、keyframesを使って、配列にオブジェクトを格納するかたちでつなげることで、意図通りのアニメーションを実行することができます。