T.Numakuraをフォローする

GSAPで簡単にアニメーションを実装する

フロントエンド
JavaScript

さまざまなWebサイトやLPを見ていると、思わず「どうやって実装しているのだろう？」と感じるほど、滑らかで洗練されたアニメーションが施されたサイトに出会うことが多々あります。
そんなWebサイトの多くで利用されてる、JavaScriptの高機能アニメーションライブラリであるGSAP。
今回は、そんなGSAPについて入門者向けに紹介します。

GSAPとは

GSAP（GreenSock Animation Platform）は、GreenSock社が開発しているJavaScriptの高性能なアニメーションライブラリです。
JavaScriptを使い、滑らかで高度なアニメーションを簡単に実装できます。

スクロールと連動したインタラクティブなものであったり、時間差や連続性のあるアニメーションを作ろうとした場合、CSSの transition や animation では難しい場合があります。そんな複雑なアニメーションも簡単に実装できるのはGSAPの魅力といえます。

※この先を読み進める前に、GSAP公式サイトのサンプルを確認しておくと、どんなアニメーションが実装できるのかイメージできるかと思います。

Demos & Starters

GSAPの特徴

GSAPには以下のような特徴があります。

高速なパフォーマンス

  • 軽量でスムーズなアニメーションが実現可能です。
  • 大量の要素のアニメーションも滑らかに動作します。

優れた互換性

  • モダンブラウザから古いブラウザまで幅広く対応しています。
  • モバイルデバイスでも安定して動作します。
  • 特定のフレームワークに依存せず使用することができます。

充実した機能セット

  • タイムライン機能による複数アニメーションの制御が可能です。
  • ScrollTriggerによるスクロール連動アニメーションの実装が可能です。
  • 豊富なイージング（ease）オプションがあります。

実装の容易さ

CSSアニメーションでは実現が難しい複雑な動きも、GSAPなら直感的なコードで実装できます。
またアニメーションはJavaScriptでほぼ完結するため、HTMLやCSSを修正する必要が少なく、コードの管理がしやすくなります。

GSAP を導入する

GSAPを導入するには以下の2つの方法があります。

CDNで導入する

最も手軽な導入方法です。

HTMLファイルのhead要素内、またはbody要素の終了タグの直前に以下のスクリプトを追加するだけです。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>

npmで導入する

おすすめの導入方法です。

以下のコマンドを自身の開発環境に合わせて実行します。

// npmの場合
npm install gsap

// yarnの場合
yarn add gsap

JavaScriptファイル内でGSAPをimportして使用します。

import gsap from 'gsap';

基本的な使い方

※これより下はHTML、CSS、JavaScriptの基礎知識がある方向けに書いております。

gsap.to で指定した状態にアニメーションする

gsap.to()の第一引数に対象となる要素、第二引数にオプションを設定することで、対象物をオプションで指定した状態にアニメーションさせることができます。

const target = document.querySelector('.target');

// 1秒間かけて右に300px移動
gsap.to (target, {
  x: 300,
  duration: 1,
});

上記のように記述をすると、　1秒間かけて要素を右に300px移動させることができます。

クリック

たとえば、背景色を6秒間かけて青色に変えたい場合は下記のように記述します。

const target = document.querySelector('.target');

// 6秒間かけて背景色を青色に
gsap.to(target, {
  backgroundColor: 'blue',
  duration: 6,
});
クリック

また、要素を360度回転させたい場合は下記のように記述します。

const target = document.querySelector('.target');

// 1秒間かけて要素を360度回転
gsap.to(target, {
  rotate: 360,
  duration: 1,
});
クリック

gsap.from で指定した状態からアニメーションする

gsap.from()の第一引数に対象となる要素、第二引数にオプションを設定することで、対象物をオプションで指定した状態からアニメーションさせることができます。

下記のように記述すると、　右300pxの位置から元の位置に戻ってきます。

const target = document.querySelector('.target');

// 1秒間かけて右300pxの位置から元の位置に戻ってくる
gsap.from(target, {
  x: 300,
  duration: 1,
});
クリック

要素が画面外からスライドインするアニメーションや、ローディングアニメーションを実装するさいに使えるかと思います。

ローディングアニメーションでは、CSSで初期位置やスタイルを設定し、あとはgsap.from()でアニメーションさせるだけです。

gsap.setで初期状態を設定する

gsap.set()の第一引数に対象となる要素、第二引数にオプションを設定することで、対象物の初期値を設定することができます。

下記のように記述すると、　右300pxの位置を初期状態としてセットすることができます。

const target = document.querySelector('.target');

// 右に300pxの位置を初期状態に設定
gsap.set(target, {
  x: 300,
});

gsap.timelineで連続したアニメーションを実装する

gsap.timeline()の後に、to()を繋げることで連続したアニメーションを実装できます。

to()の第一引数に対象となる要素、第二引数にオプションを設定します。

const target = document.querySelector('.target');
const timeline = gsap.timeline();

// 連続したアニメーション
  timeline
    .to(target, {
      x: 300,
      rotate: 360,
      backgroundColor: 'blue',
      duration: 1,
    })
    .to(target, {
      y: 300,
      rotate: -360,
      backgroundColor: 'yellow',
      duration: 1,
    })
    .to(target, {
      x: 0,
      backgroundColor: 'green',
      scale: 0.5,
      duration: 1,
    })
    .to(target, {
      y: 0,
      backgroundColor: 'red',
      scale: 1,
      duration: 1,
    });
});
クリック

まとめ

いかがでしたでしょうか？
今回は入門者向けということもあり、GSAPの概要と基本的な機能の紹介までになりますが、
他にもまだまだ高度な機能がたくさんあります。
色々触って遊んでみると、GSAPの素晴らしさを体感できると思います。
最後に、GSAPの公式サイトを掲載しておきますので興味がある方は目をとおしてみてください！
homepage | GSAP