【GSAP】アニメーションを繰り返す

GSAP

2024.09.292024.10.04

今日はアニメーションを繰り返し再生する方法を解説します。
アニメーションを任意の回数繰り返す方法、繰り返しの際に待機時間を設定する方法を説明します。

repeat

まずはアニメーションを繰り返し再生する方法です。
以下のサンプルをご覧ください。

See the Pen sample_repeat by Michi (@Michi_) on CodePen.

jsの記述はこのようになっています。

gsap.to(".sample01",{
　　x: 200,
　　duration: 1,
　　repeat: 2
});

リピート再生するのに必要なのは最後の行に記述のある『repeat: 2』この部分になります。

数字は任意の整数を入れることができます。
このとき注意が必要なのは、記述した数字の回数はアニメーションの合計再生数ではなく、リピート数であるということです。

例えば、”１”を記述したとします。
すると、元々再生されるアニメーションの回数１回、繰り返し再生する回数１回で、合計２回アニメーションが再生されます。

”２”を記述すると、元々再生されるアニメーションの回数１回、繰り返し再生する回数2回で、合計3回アニメーションが再生されるということです。

サンプルでは”repeat: 2”となっていますので、合計３回アニメーションが再生されているのが確認できると思います。

ちなみに、repeatのデフォルト値は”０”。
また、エンドレスに繰り返したい場合は” -1 ”を設定しましょう。

アニメーションを繰り返し再生することができるようになったところで、次は繰り返しの待機時間の設定方法を説明します。
まずは以下のサンプルをご覧ください。

jsの記述です。

gsap.to(".sample01",{
　　x: 200,
 　duration: 1,
 　repeat: 2,
 　repeatDelay: 0.5
});

一つ目のサンプルとの違いは、”repeatDelay: 0.5”が追加されたところです。

repeatDelayの単位は（秒）です。
今回の場合、0.5秒の待機時間を置いたのちにアニメーションが繰り返し再生されます。

今回はアニメーションを繰り返し再生する方法を説明しました。

参考文献