Web制作
GSAPの初期設定

GSAPの初期設定

2024.09.06

複雑なアニメーションを、割と簡単に作成することができるGSAP。
使いこなせるとものすごい便利なのですが、いざ導入となると、少し難しい部分があります。そこで、この記事では、GSAPの導入から基本的なアニメーションの設定を紹介しています。まだ使ったことのない方は、参考にしてもらうとありがたいです。

また、いずれこれらの記事をまとめて、別のコンテンツとして見やすくしたいと考えています。

GSAPファイルの読み込み

GSAPファイルの読み込みは、いくつかの方法がありますが、今回はCDNを使ってHTML内に読み込ませます。

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

次に、動かす対象を、divタグを使って用意します。

<style>
    .animation-sample {
        width: 200px;
        height: 80px;
        background-color: #fea7a7;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
<div class="animation-sample"></div>

そして、scripタグを使って、GSAPを設定します。

<script>
    document.addEventListener("DOMContentLoaded", () => {
        let div = document.querySelector(".animation-sample");
        gsap.to(div, {
            x: 400,
            duration: 5
        });
    });
</script>

これらを入力してブラウザで表示すると、ボックスが動くアニメーションが表示されます。

動作サンプル