【Javascript】GSAPを使ってアニメーション実装をもっと自由に!

GSAPとはアニメーション実装に特化したJavascriptライブラリです。GreenSock社が開発したライブラリで、高機能かつプラグインも豊富に用意されている優れものです。
もちろん、ちょっとしたアニメーションであればCSSやjQueryでも実装は可能です。しかし、スクロールと連動したインタラクティブなものであったり、時間差や連続性のあるアニメーションを作ろうとすると、この2つでは難しい・あるいは不可能な場合が出てきます。

そういった複雑なアニメーションの実装を容易にしてくれるのが、GSAPの魅力です。今回は、導入からごくシンプルなアニメーションの実装までやってみたいと思います。下の動画が完成イメージの動きになります。

導入準備

何はともあれ、まずはライブラリを読み込みましょう。ここでは、ライブラリ本体のデータと、スクロールイベントを検知してくれるプラグイン「ScrollTrigger」のデータを読み込みます。

公式サイトからデータをダウンロードして、以下のように記述してください(パスは各々の環境で書き換えてください。)

<!-- gsap:ライブラリ本体とプラグイン -->
<script src="assets/js/libs/gsap.min.js"></script>
<script src="assets/js/libs/ScrollTrigger.min.js"></script>

サンプルコード

以下のコードをコピペすれば、すぐにアニメーションを確認できる筈です。HTMLとCSSの説明はここでは割愛し、GSAPの記述について詳しく見ていきます。

<header class="l-header">
    <h1 class="l-header__title">GSAP Animation</h1>
</header>
<main class="l-main">
    <section class="l-section p-circle">
        <div class="p-circle__main"></div>
    </section>
    <section class="l-section p-text">
        <div class="p-text__content">
            <div class="p-text__para">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores minima, deleniti reprehenderit, aliquid necessitatibus delectus accusantium numquam ea dicta sint, unde pariatur! Totam reiciendis maxime harum officiis laudantium veritatis vel?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores minima, deleniti reprehenderit, aliquid necessitatibus delectus accusantium numquam ea dicta sint, unde pariatur! Totam reiciendis maxime harum officiis laudantium veritatis vel?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores minima, deleniti reprehenderit, aliquid necessitatibus delectus accusantium numquam ea dicta sint, unde pariatur! Totam reiciendis maxime harum officiis laudantium veritatis vel?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores minima, deleniti reprehenderit, aliquid necessitatibus delectus accusantium numquam ea dicta sint, unde pariatur! Totam reiciendis maxime harum officiis laudantium veritatis vel?</p>
            </div>
        </div>
    </section>
</main>
.l-main {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 200px 0;
}

.l-section {
  margin-top: 200px;
}

.l-header {
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  color: #fff;
  background-color: #222;
  font-size: 2rem;
  text-align: center;
}

.p-circle__main {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color: #222;
  border-radius: 50%;
}

.p-text__para p {
  margin-top: 32px;
}
// スクロールトリガーの導入
gsap.registerPlugin(ScrollTrigger);


// Circle
circle = ".p-circle__main";
gsap.set(circle, {
  scale: 0,
  y: 20
});
gsap.to(circle, {
  scale: 1,
  y: 0,
  duration: 0.32,
  // スクロール
  scrollTrigger: {
    trigger: '.p-circle',
    start: 'top center',
  }
});


// Text
text = ".p-text__para p"
gsap.set(text, {
  autoAlpha: 0,
  x: -20,
  rotate: 4
})
gsap.to(text, {
  autoAlpha: 1,
  x: 0,
  rotate: 0,
  duration: 0.8,
  scrollTrigger: {
    trigger: '.p-text', //アニメーションが始まる目印の要素
    start: 'top center', //アニメーションが始まる位置
  },
  stagger: {
    from: "start",//アニメーションの順番
    amount: 0.24 //0.24秒ズラしてアニメーション
  }
})

Javascriptの解説

上から順番に見ていきましょう。まずは冒頭の行についてです。

// スクロールトリガーの導入
gsap.registerPlugin(ScrollTrigger);

この宣言によって、先に言及したプラグイン「ScrollTrigger」が利用できるようになります。HTML側でファイルを読み込んでいるだけでは不充分ですので、注意しましょう。

プラグインの利用宣言ができたら、いよいよアニメーションに関する記述を書いていきます。GSAPにおいては、「アニメーション始動前の要素がどんな状態か設定」→「具体的なアニメーションの内容を記述」という順番で記述を進めます。というわけで、まずは要素の初期状態を設定しましょう。

// アニメーションの対象
circle = ".p-circle__main";
// アニメーション前の状態をセッティング
gsap.set(circle, {
  scale: 0,
  y: 20
});

「gsap.set(要素, {…})」という形式で書きます。ここでは「scaleが0、yに20px動いている状態」という意味になります。続けて、ここからどうアニメーションさせるか書きましょう。

// 具体的なアニメーションの内容
gsap.to(circle, {
  scale: 1,
  y: 0,
  duration: 0.32,
});

「gsap.to(要素, {…})」という形式で書きます。「scale」「y」に加え、「duration」でアニメーション完了までの秒数も設定できます。イメージとしては、「scaleが0から1の状態へ、yが20pxから0pxの位置へ、0.32秒かけてアニメーションする」という感じです。

これでアニメーション自体は設定できましたが、以下のように「ScrollTrigger」を加えてアニメーションの始動タイミングも決められます。「トリガーとなる要素(.p-circle)」と「開始位置(top center)」を書きます。

scrollTrigger: {
  trigger: '.p-circle', //アニメーションが始まる目印の要素
  start: 'top center', //アニメーションが始まる位置
}

ここまでの記述で、トリガーとなる要素が画面内の所定位置に来たタイミングで、自分が定義したアニメーションを始動させることができるようになりました。

同じ要領で他の要素のアニメーションも設定します。

// Text
// アニメーションの対象
text = ".p-text__para p"
// アニメーション前の状態をセッティング
gsap.set(text, {
  autoAlpha: 0,
  x: -20,
  rotate: 4
})
gsap.to(text, {
  autoAlpha: 1,
  x: 0,
  rotate: 0,
  duration: 0.8,
  // スクロールトリガー
  scrollTrigger: {
    trigger: '.p-text', //アニメーションが始まる目印の要素
    start: 'top center', //アニメーションが始まる位置
  }
})

大まかな流れは最初のものと同じですが、少し違うのが「同じセレクタの要素を時間差でアニメーションさせる」という点です。その際には「stagger」を追記して順番と秒差を設定してあげましょう。

stagger: {
  from: "start",//アニメーションの順番。
  amount: 0.24 //0.24秒ズラしてアニメーション
}

これにより、「HTMLの記述順に則って、0.24秒ズレてアニメーションが始動する」ようになりました。「from」の値次第で面白い演出が実装できるので、色々試してみると良いでしょう。公式にサンプルがありますので、確認してみてください。

終わりに

GSAPを利用してシンプルなアニメーションを実装してみました。ここでriyouした以外にも、「背景色」「傾斜」など、指定できるアニメーションのプロパティは数多くあります。詳しくは公式のドキュメントを参照してください。

今回の内容で、ごくごく基本的な機能は使えるようになりました。次回は、GSAPの最大の特徴でもある「timeline」kinouを利用し、より複雑なアニメーションの実装に挑戦してみたいと思います。

RECENT ENTRIES

  • 【Javascript】GSAPを使ってアニメーション実装をもっと自由に!

    VIEW MORE
  • 【Jsライブラリ】vanilla-tilt.jsで目を引くホバー演出を実装しよう

    VIEW MORE
  • 【ウェブ解析】ブルー・オーシャン戦略に必要なフレームワーク

    VIEW MORE

CONTACT

contact