🚀

GSAPのアニメーションにスキップボタンを実装する

2022/10/18に公開

2件

はじめに

先日GSAPを使って比較的長いローディングアニメーションを実装したのですが、ページを読み込むたびにアニメーションが発火するのは煩わしいということで、スキップボタンが必要になりました。
結果的にとても簡単な方法で実装することができましたが、自分で調べてもあまり情報が出てこなかったので記事にします。

やりたいこと

アニメーションの実行中にスキップボタンを押下すると、アニメーションが完了した状態までスキップする。

結果 (SKIPを押すとアニメーションをスキップできます)

右下のRerunを押すと再読み込みできます。

ポイント

skip.addEventListener("click", () => {
  //5.5秒後の状態までスキップする
  tl.seek(5.5);
});

肝心な記述はたったこれだけです。
seek()で指定した秒数の時点までアニメーションをスキップさせることができます。
サンプルのアニメーションでは、数字のカウント部分のアニメーションが終了するまでに5.5秒掛かっているので5.5秒を指定しています。

終わりに

スキップボタンを実装したのが初めてだったのですがここまで簡単にできるとは思わず、さらにGSAPのことが好きになりました。
seek()を使えば今回のようなスキップボタンだけではなく、秒数の長いアニメーションを開発中に検証したいラベルからスタートできるので、デバッグにも使えそうですね。
なにか間違っていることや、他に良い方法などがあれば気軽に教えていただけると嬉しいです。

参考

Discussion

ピン留めされたアイテム

かがん

ナイスな記事ありがとうございます
調べても意外と出てこないことありますよね…！　記事作成素晴らしいです 👏

より便利な指定の紹介をさせていただくと、label の機能がより便利です。
labelは、timelineの特定のタイミングに名前を付けて参照できる機能です。

アニメーション定義中にaddLabelで名前をつけ、

// 略
tl.to(".skip", {duration: 0.1, autoAlpha: 0});
tl.addLabel("skip-target"); // スキップさせたいタイミングにラベルをつける
tl.to("svg", {duration: 1, autoAlpha: 1});
// 略

seekの引数にlabelの文字列をそのまま指定できます ✨

skip.addEventListener("click", () => {
    tl.seek("skip-target");
});

数値指定の場合、秒数をわざわざ計算しなきゃですし、アニメーションの長さが変わったときに変更する必要もあるので面倒ですが、labelではその必要もありません！

mino

コメントありがとうございます。
labelめちゃくちゃ便利ですね…！！知りませんでした！
秒数を自動で計算する方法ないかな〜と考えていたので目から鱗です 👀
有益な情報を教えていただきありがとうございます☺️
勝手ながら記事内に追記させていただきました🙇🏻