WEBTODESIGN

GSAPで同じ要素にアニメーションを重ね掛けできるkeyframes

GSAPのScrollTriggerを使って、スクロールに合わせて円が大きくなるアニメーションを実装したのですが…。大きくした後小さく戻したい！

大きくするアニメーションと小さくするアニメーションをつなげるにはどうすればいいか、数日躓きましたが、ようやく方法が分かったので記録。

失敗例

まず最初は、通常通り繋げてみました。

gsap.to('.target', {
    width: '150vw',
    height: '150vw'
});
gsap.to('.target', {
    width: 0,
    height: 0
});

これでは最後の一つだけが実行されます。

タイムラインも試してみましたが、ダメでした。

gsap.timeline('.target', {
    width: '150vw',
    height: '150vw'
}).to('.target', {
    width: 0,
    height: 0
});

最後のアニメーションが最初のアニメーションを上書きしているみたいです。

成功例

keyframesで繋げる

正しい方法は、keyframesで繋げる方法です。

gsap.to('.target', {
    keyframes: [
        { width: '150vw', height: '150vw' },
        { width: 0, height: 0}
    ]
});

繋げたいオブジェクトをkeyframesの配列に格納します。カンタン！

これで、無事大きくなって小さくなるアニメーションが実装できました。

RECOMMENDATION

NEWEST