様々なアニメーションが簡単に実装できるGSAPを使ってみましょう！

GSAPとは？

GSAP＜ジーサップ＞とは、GreenSock Animation Platformの略で、GreenSockが作ったアニメーションに特化したJavaScriptのライブラリです。以前はTimelineLiteとかTimelineMaxとかを提供していましたが、統合されてGSAPというライブラリ名になりました。

アニメーションができるJavaScriptのライブラリにjQueryがありますが、jQueryはAjaxやDOM操作などできるのに対して、GSAPではそういったことはできません。

GSAPはあくまでアニメーションさせるためのライブラリということですね。

好みが分かれる部分ではありますが、jQueryもGSAPもどちらも学習コストは低いので、どちらも基本的な使い方とルールは学んでおいたほうが良いですね！

GSAPの基本

GSAPを使うときはライブラリを読み込まないといけません。GSAPにはScrollTriggerとか関連するライブラリがありますので、GSAP → GSAPのライブラリ → 実行ファイルという順番に読み込みます。

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="./script.js"></script>

</body>の直上でCDNで読み込んでおくと便利です。

GSAPの使い方

基本的な使い方は、.setにアニメーションする前のプロパティ、.toにアニメーションした後のプロパティを書きます。

gsap.set(".content", {
  autoAlpha: 0,
});

gsap.to(".content", {
  autoAlpha: 1,
});

jQueryと比べるとかなりシンプルですね。

アニメーションをスクロールに連動させる

スクロールをアニメーションと連動させるにはGSAPのScrollTriggerを使うことで簡単に実装できます。

書き方はこんな感じですね。

gsap.set(".content", {
  autoAlpha: 0,
});

gsap.to(".content", {
  delay: "0.5",
  duration: "0.5",
  autoAlpha: 1,

  scrollTrigger: {
    trigger: ".content",
    start: "50% 100%",
  },
});

gsap.set

アニメーションする前のプロパティを書いておきます。

autoAlpha: 0,

今回はautoAlphaで不透明度を0にして要素を見えなくしています。

gsap.to

アニメーションした後のプロパティを書いておきます。

delay: "0.5",
duration: "0.5",
autoAlpha: 1,

今回はdelayでアニメーションが実装されるまでの時間を0.5秒、durationでアニメーションが始まってから終わるまでの時間を0.5秒、autoAlphaを1にして表示させるようにしています。

scrollTrigger

スクロールトリガーが発火する場所を書きます。

start: "50% 100%",

startには2つの値を指定することができます。50%と書いてあるところは「この要素が」という意味で、50%は.contentの真ん中、100%と書いてあるところは「ここまできたら発火する」という意味です。

GSAPのみを使ったサンプル

GSAPのみを使ったアニメーションのサンプルです。EDIT ON CODEPENをクリックしてCodePenで見てもらうとスムーズです。

See the Pen
GSAPの使い方 by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

遅延、フェードイン、横スクロールなど定番のアニメーションは簡単に実装できますね！

さいごに

GSAPは軽量で書き方もシンプルな定番のアニメーションライブラリです。使い方を知っておくと非常に多くのことができるようになるので、ぜひ習得しておきましょうー！