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

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

デモ

デモが表示されない場合は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},
  ]
})

まず、上のようにgsap.to()を単に並べるだけでは、順番には動きません。
3つのtweenが同時に開始し、同じ要素の同じプロパティ(ここではx)は後から作ったtweenが勝つため、結果として最後の行の動きだけが見えます。
そのため、keyframesを使って、配列にオブジェクトを格納する形でつなげると、意図通りに順番にアニメーションを実行できます。
各キーフレームにはdurationのほかにease、delay、onCompleteなどのコールバックも個別に指定できます。発火条件はGSAPコールバックの使い方を参照してください。
keyframesは1つの要素の動きをつなげる用途に向いています。複数の要素を順番に動かす場合や、途中で一時停止したい場合はGSAP Tweenの使い方で扱っているTimelineを使います。