【GSAP】クリックでアニメーションを開始する方法2パターンを紹介

アニメーションライブラリGSAPを使って、ターゲットをクリックしたときにアニメーションを開始する方法を紹介します。

「クリックしたとき」ということで、javascriptやjQueryのクリックイベントとの組み合わせとなりますが、イベント部分については詳しく説明していません。

ここではクリックイベントでGSAPをどのように使うかという視点で、方法を2パターン紹介しています。

Web制作の参考になればと思います。

GSAPを使いクリックでアニメーションを開始する方法
まとめ

GSAPを使いクリックでアニメーションを開始する方法

クリックしたときにアニメーションを作る方法

まずソースコードの全体像です。
jQueryを使っていますので、gsapの読み込みの前にjQueryも読み込んでいます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クリックでアニメーションを開始する</title>
</head>
<body>
  <div class="box1" style="width:140px;height:140px;margin:10px;padding:10px;border:2px solid;">
    Click!
  </div>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
  <script>
    $(".box1").on("click", function(){
      gsap.to(".box1", { x: 200 });
    });
  </script>
</body>
</html>

このHTMLファイルを開くと四角が表示され、四角をクリックすると右に200px移動します。

シンプルな例です。box1クラスがクリックされたときに、GSAPでアニメーションを定義します。

これだけでも色々なことができると思います。欠点としては、アニメーションが1度きりというところかと思います。

それが良いか悪いかは制作するページによって変わりますが、クリックする度に何度もアニメーションを動かそうと思うと、次のような方法があります！

GSAPのアニメーションを先に作っておく方法

次は、先にアニメーションを設定しておく方法。動きは先ほどのサンプルと同じです。

アニメーションの定義部分を先に作って、animeという変数に入れておきます。
そして対象がクリックされた時に、そのアニメーションを開始するという流れです。

var anime = gsap.to(".box1", { x: 200, paused: true });

$(".box1").on("click", function(){
  anime.play();
});

ポイントは1行目のpaused:true の設定です。

これはアニメーションを一時停止させておく設定ですが、これがないとクリックするとか関係なく、画面が表示されると同時にアニメーションが始まってしまいます。

あとは、普通にクリックイベントの書き方で、box1がクリックされたときにplay() を使って、一時停止しておいたアニメーションを再生します。

ちなみに、play()関数ではアニメーションは1回再生して終わりです。

何度もアニメーションさせたい場合は、次のようにrestart()を使うとクリックしたときに再再生します。

var anime = gsap.to(".box1", { x: 200, paused: true });

$(".box1").on("click", function(){
  anime.restart();
});

こちらの形の方が使い勝手がよく、色々と応用できると思います。
例えば、アニメーションの部分にタイムラインを使った動きを定義しておけば可能性が広がるのではないでしょうか。

タイムラインとの組み合わせ

参考までに、少し応用した例です。
先ほどのサンプルのアニメーション部分をタイムラインにした例です。

私はよくこのパターンでアニメーションを作ることが多いです。タイムラインを使って複雑なアニメーションを作る場合、アニメーションの動き部分だけでもコードが長くなります。

このようにアニメーションの処理を変数に保存して分けておくと、アニメーションの処理とクリックしたときの処理が分かりやすく、個人的に好みの書き方です。

var anime = gsap.timeline({ paused: true });
anime.to(".box1", { x: 200 })
     .to(".box1", { y: 200 });

$(".box1").on("click", function(){
  anime.restart();
});