アニメーション効果を簡単に実現できるGSAPの書き方【超基礎編】

WEB

2023年2月25日

こんにちは。コーダーのeriです。

アニメーションってとても難しそうなイメージがありますが、最近は便利なライブラリなどたくさん出ています。

おしゃれな参考サイトを見ているとGSAPというアニメーションライブラリを使っているサイトが多かったので実際に試してみました！

1 GSAPとは
2 GSAPでできること
3 導入
4 アニメーション作成の流れ
5 実装例
6 最後に
7 全ソースコード

GSAPとは

GSAPとはWEBサイトにアニメーション効果をつけることができるJavaScriptライブラリで、高度なアニメーションを簡単に実装することができます。

アニメーション実装方法が全く分からない方でもこの記事を見れば簡単に実装できるでしょう！

今回は超基礎編なのでGSAPでアニメーションを実装する為に最低限必要なものを使って、ローディングからのアニメーションを実装していきます。

デモ

GSAPでできること

①トゥイーンアニメーションなど、要素の変化をアニメーション化することができます。
要素の位置やスケール、透明度などを変化させることができ、アニメーションスピードや時間、遅延などを制御することができます。

②マウスオーバーやSVGを使ったアニメーション、パララックスアニメーション、スクロールに応じたアニメーション効果を実現することもできます。

GSAPはとても軽量で、高速で滑らかな動き・複雑なアニメーションを実現することができます。

導入

導入方法は、手軽に導入するならCDN。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

他にもnpm、zip、GitHubなどあります。

公式HPにあるのでここから導入します。

https://greensock.com/

今回はCDNを使って進めます。

これをbodyタグの閉じタグの前に貼り付けます。

これで導入は完了です！

アニメーション作成の流れ

まずはGSAPアニメーションの作成で必要なメソッドを簡単に説明します。

①setメソッド

初期の状態を設定できます。（要素を動かす前の状態）

// 初期の段階でドットを非表示に
gsap.set(jsDot, {
    opacity: 0,
});

②toメソッド

状態を変化させることができます。

// setメソッドで非表示にしていたドットを表示
to(
   jsDot, {
      opacity: 1,
   },
);

③timelineメソッド

各アニメーションを連動させるメソッドです。

timelineを使い、toで繋いで時間差アニメーションが実現できます。

gsap.timeline();

このset、to、timelineだけでアニメーションが出来てしまいます。

実装例

①アニメーションさせたい要素が必要なのでまずはHTML、CSSを作成していきます。

■最初に表示させるドット３つと背景色。

<div class="dot-bg js-dot-bg">
   <div class="dot-wrap js-dot-wrap">
     <span></span>
     <span></span>
     <span></span>
   </div>
</div>

 /* 黒背景 */
.dot-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #696969;
z-index: 100;
display: grid;
place-items: center;
pointer-events: none;
}
.dot-wrap {
display: inline-flex;
align-items: center;
justify-content: start;
}
/* ドット */
.dot-wrap>span {
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
}
.dot-wrap>span:nth-of-type(1){
background-color: #FFC107;
}
.dot-wrap>span:nth-of-type(2){
background-color: #FFA000;
}
.dot-wrap>span:nth-of-type(3){
background-color: #26C6DA;
}
.dot-wrap>span+span {
margin-left: 3rem;
}

■最後に表示させるテキスト。

<div class="title-wrap">
   <div class="title js-title">超基礎編</div>
   <div class="title js-title">オープニングアニメーション！</div>
</div>

 /* テキスト */
.title-wrap {
padding-top: 13.7rem;
position: relative;
z-index: 10;
font-weight: bold;
line-height: 1.6;
display: inline-block;
min-width: 32rem;
margin-bottom: 6.4rem;
vertical-align: top;
}
.title {
font-size: 40px;
line-height: 2;
}
.title span {
/* transformプロパティを有効にする */
display: inline-block;
}

②あとはそれをJavaScriptで制御していきます。

先に、テキストを分割しspanで囲む、という処理を書いておきます。

(function () {
const jsText = document.querySelectorAll('.js-title');
jsText.forEach(target => {
   let newText = '';
   const text = target.textContent;
   const result = text.split('');
   for (let i = 0; i < result.length; i++) {
      newText += '<span>' + result[i] + '</span>';
   }
   target.innerHTML = newText;
   });
})();

⑴各要素をHTMLから取得。

それぞれ変数に代入。

const jsDot = '.js-dot-wrap > span'; // ドットを取得
const jsBg = '.js-dot-bg'; // 黒い背景を取得
const jsText = '.js-title span'; // テキストを取得

⑵setメソッドで、最初の表示段階ではテキストは非表示にしておく。

// 初期の状態(取ってきたドット・テキストは最初は非表示)

// ドットとテキストを非表示
gsap.set([jsDot, jsText], {
   opacity: 0,
});

// ドットの最初の位置を上40pxに配置
gsap.set(jsDot, {
   y: -40
});

// テキストの最初の位置を下40pxに配置
gsap.set(jsText, {
   y: 30
});

⑶timelineメソッドを変数に代入。

// timelineを作成（各アニメーションを連動させる）
const tl = gsap.timeline();

⑷toメソッドを使って各アニメーションを連動させていきます。

上で作成した変数 tl に.toで連動させます。

その後は.toで繋げていきます。

tl.to(
   jsDot, {
      opacity: 1,
      y: 0, //setで配置した位置から0で元の位置に戻す
      duration: 0.5, // 0.8秒かけてアニメーション
      delay: 0.8, // 0.8秒後に起動
      // staggerで順番にアニメーションさせる
      stagger: {
         amount: 0.5, //アニメーション間隔の合計時間
         from: "start", // 動作を始める要素を指定
         ease: 'power4.inOut'
      },
     },
   ).to(
   jsDot, {
      opacity: 0
   },
   '+=.5' // 前のアニメーションが完了した0.5秒後にドットを非表示
   ).to(
   jsBg, {
      duration: 0.7, // 0.7秒かけてアニメーション
      delay: 0.3, // 0.3秒後に起動
      x: '100%' //右に100%移動させて画面の外に出す
   },
   '+=0.3' 
   ).to(
   jsText, {
      opacity: 1,
      y: 0, //setで配置した位置から0で元の位置に戻す
      stagger: {
         amount: 1, //アニメーション間隔の合計時間
         from: "start", // 動作を始める要素を指定
         ease: "sine.in"
      }
   },
   "+=0.4" // 前のアニメーションが完了した0.4秒後に実行
  )

以上で実装完成です。

“+=0.3”を指定するだけで、前のアニメーションが完了した〇秒後に次のアニメーションを実行する。

という処理ができるのでとても便利です。

'+=0.3'

staggerを使えば各要素を順番にアニメーションさせることができます。

今回の例だとドットが三つありますが、それぞれの要素を少し時間をずらして動作させています。

stagger: {
   amount: 0.5, //アニメーション間隔の合計時間
   from: "start", // 動作を始める要素を指定
   ease: 'power4.inOut'
   },

最後に

GSAPにはたくさんの機能があります！

■要素の移動、回転、拡大縮小などのアニメーション

■SVGのアニメーション

■スクロールによってトリガーされるアニメーション

■ドラッグやタッチジェスチャーによってトリガーされるアニメーション

■パララックスアニメーション

など、できることがたくさんあり、高度なものを作ることができます。

アニメーションとなると難しそうなイメージでしたが、GSAPを使えば少し複雑なアニメーションも作れることがわかったので、これからちょくちょく触っていきたいと思いました！

全ソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>GSAPアニメーション</title>
    <style>
    /* 黒背景 */
    .dot-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #696969;
      z-index: 100;
      display: grid;
      place-items: center;
      pointer-events: none;
    }
    .dot-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: start;
    }
    /* ドット */
    .dot-wrap>span {
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    .dot-wrap>span:nth-of-type(1){
      background-color: #FFC107;
    }
    .dot-wrap>span:nth-of-type(2){
      background-color: #FFA000;
    }
    .dot-wrap>span:nth-of-type(3){
      background-color: #26C6DA;
    }
    .dot-wrap>span+span {
      margin-left: 3rem;
    }
    /* テキスト */
    .title-wrap {
      padding-top: 13.7rem;
      position: relative;
      z-index: 10;
      font-weight: bold;
      line-height: 1.6;
      display: inline-block;
      min-width: 32rem;
      margin-bottom: 6.4rem;
      vertical-align: top;
    }
    .title {
      font-size: 40px;
      line-height: 2;
    }
    .title span {
    /* transformプロパティを有効にする */
      display: inline-block;
    }
    </style>
  </head>
<body>
<!-- 黒背景とドット -->
<div class="dot-bg js-dot-bg">
  <div class="dot-wrap js-dot-wrap">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<!-- テキスト -->
<div class="title-wrap">
  <div class="title js-title">超基礎編</div>
  <div class="title js-title">オープニングアニメーション！</div>
</div>
<!-- GSAP読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script>
  (function () {
'use strict';
    /* 文字列（テキスト）を分割しspanで囲む */
    (function () {
      const jsText = document.querySelectorAll('.js-title');
      jsText.forEach(target => {
        let newText = '';
        const text = target.textContent;
        const result = text.split('');
        for (let i = 0; i < result.length; i++) {
          newText += '<span>' + result[i] + '</span>';
         }
         target.innerHTML = newText;
      });
    })();
const jsDot = '.js-dot-wrap > span'; // ドットを取得
const jsBg = '.js-dot-bg'; // 黒い背景を取得
const jsText = '.js-title span'; // テキストを取得
// 初期の状態(取ってきたドット・テキストは最初は非表示)
// ドットとテキストを非表示
gsap.set([jsDot, jsText], {
  opacity: 0,
});
// ドットの最初の位置を上40pxに配置
gsap.set(jsDot, {
  y: -40
});
// テキストの最初の位置を下40pxに配置
gsap.set(jsText, {
  y: 30
});
// timelineを作成（各アニメーションを連動させる）
const tl = gsap.timeline();
// toで状態を変化させる
tl.to(
jsDot, {
  opacity: 1,
  y: 0, //setで配置した位置から0で元の位置に戻す
  duration: 0.5, // 0.8秒かけてアニメーション
  delay: 0.8, // 0.8秒後に起動
  // staggerで順番にアニメーションさせる
  stagger: {
    amount: 0.5, //アニメーション間隔の合計時間
    from: "start", // 動作を始める要素を指定
    ease: 'power4.inOut'
  },
},
).to(
jsDot, {
  opacity: 0
  },
'+=.5' // 前のアニメーションが完了した0.5秒後にドットを非表示
).to(
jsBg, {
  duration: 0.7, // 0.7秒かけてアニメーション
  delay: 0.3, // 0.3秒後に起動
  x: '100%' //右に100%移動させて画面の外に出す
},
'+=0.3' 
).to(
jsText, {
  opacity: 1,
  y: 0, //setで配置した位置から0で元の位置に戻す
  stagger: {
    amount: 1, //アニメーション間隔の合計時間
    from: "start", // 動作を始める要素を指定
    ease: "sine.in"
  }
},
"+=0.4" // 前のアニメーションが完了した0.4秒後に実行
)
})();
</script>
</body>
</html>