【GSAP】アニメーションをクリック・ホバーイベントと連動させる方法

公開日：2025-10-13

JavaScript

GSAP

GSAPはデフォルトでは、ページが読み込まれたタイミングでアニメーションが開始されます。

しかし、これを制御して、クリックやホバーなどのイベントが発生してからアニメーションを開始させることもできます。

今回はGSAPのアニメーションをクリックやホバーイベントと連動させる方法を解説します。

GSAPアニメーションをクリックイベントと連動させる方法

今回は、以下のようなデモを作りながらGSAPアニメーションをクリックイベントと連動させる方法を解説します。

See the Pen GSAP Tweenインスタンスクリックイベント連動デモ by E-VALUE WORKS (@evw) on CodePen.

スタート時点のファイル構成として、HTML・CSS・JavaScriptは以下の内容を使用します。

■HTML

<p>ボタンをクリックするとアニメーションが始まります。</p>
<div class="box"></div>
<button class="btn">アニメーション開始</button>

■CSS

.box {
  margin: 50px;
  width: 100px;
  height: 100px;
  background: #18c1f0;
}

.btn {
  display: block;
  padding: 5px 10px;
  cursor: pointer;
}

■JavaScript

document.addEventListener("DOMContentLoaded", () => {
  gsap.to(".box", {
    x: 300,
    rotation: 360,
    duration: 1.5,
    ease: "power2.out",
  });
});

基本メソッドto・from・fromToの使い方が分からない方はこちらをチェック

アニメーションライブラリ「GSAP」の基本！to、set、from、fromToメソッドの使い方

STEP. 1：Tweenインスタンスを変数に格納する

GSAPのtoやfrom、fromToといったメソッドは、Tweenインスタンスを返します。

GSAPアニメーションをクリックやホバーなどのイベントと連動させる場合は、このインスタンスを使って制御します。

今回は、tweenという名前の変数にインスタンスを格納することにします。

document.addEventListener("DOMContentLoaded", () => {
  const tween = gsap.to(".box", {
    x: 300,
    rotation: 360,
    duration: 1.5,
    ease: "power2.out",
  });
});

これでtweenインスタンスを取得できました。

STEP. 2：pausedプロパティを指定してアニメーションを停止しておく

STEP. 1でtweenインスタンスを取得しましたが、アニメーション自体は変わらずページ読み込み時に自動で始まる状態のため、初期状態でアニメーションされないように停止しておく必要があります。

初期状態でアニメーションを停止しておくには、pausedプロパティを指定します。

document.addEventListener("DOMContentLoaded", () => {
  const tween = gsap.to(".box", {
    x: 300,
    rotation: 360,
    duration: 1.5,
    ease: "power2.out",
    paused: true,
  });
});

上のように「pause: true」とすることで、ページが読み込まれてもアニメーションされず停止された状態になります。

STEP. 3：イベント発生後にplayメソッドでアニメーションを再生する

pausedプロパティでアニメーションを停止させた状態にしている場合、アニメーションを再生するには play()メソッドを使用します。

クリックイベント発生後にアニメーションが再生されるようにするには、以下のようにボタンに対してクリックイベントを設定し、その中でplay()メソッドを呼び出します。

document.addEventListener("DOMContentLoaded", () => {
  const tween = gsap.to(".box", {
    x: 300,
    rotation: 360,
    duration: 1.5,
    ease: "power2.out",
    paused: true,
  });

  const btn = document.querySelector(".btn");

  btn.addEventListener("click", () => {
    tween.play();
  });
});

これでクリックイベントでアニメーションが開始されるデモを実装できました。

See the Pen GSAP Tweenインスタンスクリックイベント連動デモ by E-VALUE WORKS (@evw) on CodePen.

なお、play()メソッド以外にも以下のようなメソッドがあります。

項目	説明
play	アニメーションを再生する。
pause	アニメーションを一時停止する。
resume	一時停止していたアニメーションを再開する。
reverse	アニメーションを逆再生する。
restart	アニメーションを最初から再生し直す。

以下では、「再生」をクリックするとplay()メソッドを呼び出し、「逆再生」をクリックするとreverse()メソッドを呼び出すようにしています。

See the Pen Untitled by E-VALUE WORKS (@evw) on CodePen.

GSAPアニメーションをホバーイベントと連動させる方法

続いて、GSAPアニメーションをホバーイベントと連動させる方法を解説します。

See the Pen GSAP Tweenインスタンスホバーイベント連動デモ by E-VALUE WORKS (@evw) on CodePen.

スタート時点のファイル構成は以下の通りです。

■HTML

<p>ボックスをホバーするとアニメーションが始まります。</p>
<div class="box"></div>

■CSS

.box {
  margin: 50px;
  width: 100px;
  height: 100px;
  background-color: #18c1f0;
}

■JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const box = document.querySelector(".box");

  gsap.to(box, {
    x: 300,
    rotation: 360,
    duration: 1.2,
    ease: "power2.out",
  });
});

ホバーイベントのときもクリックイベントと同様で、まずTweenインスタンスを変数に格納し、pausedプロパティを指定してアニメーションを停止しておきます。

document.addEventListener("DOMContentLoaded", () => {
  const box = document.querySelector(".box");

  const tween = gsap.to(box, {
    x: 300,
    rotation: 360,
    duration: 1.2,
    ease: "power2.out",
    paused: true,
  });
});

次に、マウスを乗せたときと離したときにそれぞれplay()とreverse()メソッドを実行したいため、ボックス要素にmouseenterとmouseleaveのイベントを設定します。

document.addEventListener("DOMContentLoaded", () => {
  const box = document.querySelector(".box");

  const tween = gsap.to(box, {
    x: 300,
    rotation: 360,
    duration: 1.2,
    ease: "power2.out",
    paused: true,
  });

  box.addEventListener("mouseenter", () => tween.play());

  box.addEventListener("mouseleave", () => tween.reverse());
});

これでデモのような実装ができました。

See the Pen GSAP Tweenインスタンスホバーイベント連動デモ by E-VALUE WORKS (@evw) on CodePen.