GSAP（GreenSock）入門：複雑なアニメーションも簡単に制御する方法

GSAPとは？なぜ使うのか

GSAP（GreenSock Animation Platform）は、JavaScriptで高性能なアニメーションを実装できるライブラリです。

特徴

• パフォーマンスが高い：ほとんどのモダンブラウザで60fpsを実現。
• クロスブラウザ対応：主要ブラウザで一貫したアニメーションが可能。
• 直感的なAPI：複雑なアニメーションも簡単に記述できる。
• 豊富なプラグイン：ScrollTriggerやDraggableなど、拡張性が高い。

こんな場面で活躍

• ローディングアニメーション
• ページスクロールに連動した演出
• SVGアニメーション
• スライダーやモーダルの動きの制御

基本の使い方：GSAPを使ったシンプルなアニメーション

まずは基本的なアニメーションを作ってみましょう。

1. CDNを読み込む

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

2. HTMLとCSSの用意

<div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    background: #00bcd4;
    position: relative;
}

3. アニメーションの記述

gsap.to(".box", {
    x: 300,
    duration: 1,
    ease: "power2.out"
});

このコードは、.box 要素を1秒かけて右に300px移動させます。

応用テクニック：タイムラインで複雑なアニメーションを管理

複数のアニメーションを連続・並列で制御する場合は、gsap.timeline() を使います。

タイムラインの例

const tl = gsap.timeline();

tl.to(".box", { x: 100, duration: 0.5 })
  .to(".box", { y: 100, duration: 0.5 })
  .to(".box", { rotation: 360, duration: 1 });

この例では、要素が右へ移動 → 下へ移動 → 回転 の順でアニメーションします。

同時に複数アニメーションを実行

tl.to(".box", { x: 100, duration: 1 })
  .to(".box", { y: 100, duration: 1 }, "<"); // 同時に実行

ScrollTriggerでスクロール連動アニメーション

GSAPのプラグイン「ScrollTrigger」を使えば、スクロールに応じたアニメーションも簡単です。

CDNの読み込み

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

実装例

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box",
        start: "top 80%",
        toggleActions: "play none none none"
    },
    x: 200,
    duration: 1
});

このコードでは、.box が画面の80%位置に来たときにアニメーションが始まります。

まとめ：GSAPでアニメーションの自由度が劇的に向上

GSAPを使うことで、シンプルな動きから複雑な演出まで、柔軟かつ高性能に実現できます。特にtimelineやScrollTriggerを活用することで、ユーザーの操作に応じたダイナミックな表現が可能になります。

なお、弊社では可読性・拡張性の観点から、こうしたライブラリを多用せず、必要に応じてアニメーション処理を自作することが多くなっています。ただし、ライブラリによる実装が適しているケースもあるため、状況に応じた使い分けが重要です。本記事はその一助となることを目的としてご紹介しました。