GSAP（GreenSock Animation Platform）は、JavaScriptで制御できる要素に対して、最小限のコードで素晴らしいアニメーションを実現するための強力なライブラリです。滑らかなパフォーマンスと優れたサポートを提供し、開発者が創造的な側面に焦点を当てられるようになります。
本ブログでは、私が試したGSAPの実際のサンプルコードを複数記事に分けて紹介しようと思っています。基本初心者、中級者向けです。是非今後の開発にお役に立てれば幸いです。

公式サイト

GSAPの公式サイトを訪れると、UIのアニメーション、SVG、没入感のあるWebGL体験など、さまざまな領域での活用例が豊富に紹介されています。このサイトを見ればGSAPできることのすべてがわかるおですが、英語であることと、情報が多すぎて見る気にならないというのが正直なところです。

GSAPのインストール

GSAPのインストール
GSAPの導入は非常に簡単です。いくつか方法はありますが、今回はCDNでの導入方法が一番簡単なのでその方法を紹介します。

CDNの場合は、公式サイトをで最新のバージョンを調べることができます。

以下のコードをHTMLに貼り付けてください。

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

図形を回転させる

図形を回転させるコードです。公式ページのサンプルをそのまま載せても芸がないので、ちょっと替えて星にしてみました。

<style>

    #gsap-star-css {

        width: 150px;

        height: 150px;

        background: #f0ec20;

        clip-path: polygon(50% 5%, 61% 40%, 98% 40%, 68% 62%, 79% 96%, 50% 75%, 21% 96%, 32% 62%, 2% 40%, 39% 40%);

    }

</style>



<div id="gsap-star-css"></div>



<script>

    gsap.to("#gsap-star-css", {

        duration: 2,

        ease: "none",

        repeat: -1,

        rotation: 360,

    });

</script>

図形をフェードインさせる

スクロールさせると、画像がふわっとフェードインするサイトよく見かけますよね。gsapでも当然できます。
スクロールしてからアニメーションを開始させるので、ScrollTriggerというプラグインを使います。

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

<style>

    #gsap-box-css {

        width: 150px;

        height: 150px;

        background: #f0ec20;

    }

</style>



<div id="gsap-box-css"></div>



<script>

    gsap.fromTo(

        "#gsap-box-css", // アニメーションさせる要素

        {

            autoAlpha: 0, // アニメーション開始前は透明する

        },

        {

            autoAlpha: 1, // アニメーション後は非透過にする(透過率0)

            scrollTrigger: {

                trigger: "#gsap-box-css", // アニメーションが始まるトリガーとなる要素

                start: "top center", // アニメーションの開始位置

                scrub: true, // スクロールに追従させる

            }

        }

    );

</script>