特徴

GSAPを活用したアニメーションには、次のような特徴があります。

• 高速処理：requestAnimationFrameを利用して最適化された描画を行うため、カクつきが少ない。

• 柔軟性：位置・回転・拡大縮小・透明度など、あらゆるCSSプロパティを制御可能。

• 拡張性：ScrollTriggerやMorphSVGなど豊富なプラグインが存在。

• 信頼性：国内外の多くのデモや学習リソースが公開されており、学びやすい環境が整っている。

CSSやjQueryとの違い

CSSアニメーションはシンプルに書けますが、細かい制御が難しく、条件分岐や複数要素の同期は不得意です。jQueryアニメーションは柔軟ですが、パフォーマンスが低く、モバイルではカクつきが目立ちます。

これに対して GSAPアニメーション は、スムーズな動作と高度な制御を両立できる点で優れています。

CDNでの読み込み

最も簡単な導入方法は、CDNリンクをHTMLに追加することです。

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

npmやyarnでの導入

モジュールバンドラ（Webpack, Vite, Parcelなど）を利用する場合は、以下のようにインストールします。

npm install gsap

import { gsap } from "gsap";

gsap.to()

要素を「ある状態へ」動かすときに利用します。

gsap.to(".box", { x: 200, duration: 2, opacity: 0.5 });

gsap.from()

要素を「指定した初期状態から元の位置へ」動かすときに使用。フェードインやスライドインに最適です。

gsap.from(".title", { y: -100, opacity: 0, duration: 1 });

gsap.fromTo()

開始と終了を両方指定できるため、動きを明確に定義できます。

gsap.fromTo(".image", { scale: 0 }, { scale: 1, duration: 2 });

フェードイン・フェードアウト

gsap.to(".text", { opacity: 1, duration: 1 });

スライドイン

gsap.from(".menu", { x: -300, duration: 1 });

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

gsap.registerPlugin(ScrollTrigger);

gsap.to(".section", {
  scrollTrigger: ".section",
  y: 100,
  opacity: 1,
  duration: 1
});

Timelineで複雑なアニメーションを制御

let tl = gsap.timeline();
tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 100, duration: 1 }, "-=0.5")
  .to(".box3", { rotation: 360, duration: 2 });

テキストアニメーション

テキストが1文字ずつ動くアニメーションの場合、通常1文字ずつpタグなどで囲い、それらに対しCSSやJSでアニメーションを実装していくのが一般的だと思います。

GSAPでこのアニメーションを実装する場合、以下のような形で実装できます。
HTML

<p class="split">Animated Letters!</p>

JS

gsap.registerPlugin(SplitText);
  SplitText.create(".split", {
    type: "words, chars",
    onSplit(self) {
      gsap.from(self.chars, {
        duration: 0.7,
        y: 120,
        repeat: -1,
        autoAlpha: 0,
        stagger: 0.09,
      });
    },
  });

完成したもの

実際に試してみて、コードの記述量が少なくて済むというのはもちろんですが、「もう少しゆっくり表示させたい」「文字が表示される方法を変えたい」などの修正が発生した際も、簡単に調整できる点が良いと感じました。

バウンドアニメーション

HTML、CSSで構築した球体をリアルな感じでバウンドさせることも可能です。

※gifだとカクツキがあるのですが、実際はもっと滑らかにバウンドします

Web制作においてアニメーションを導入する際に重要なのが、パフォーマンス（描画の滑らかさ・処理速度）です。どんなにデザインが優れていても、カクついたり、スクロールが重くなったりするとユーザー体験を損ねてしまいます。ここでは、GSAPアニメーションがパフォーマンス面で優れている理由と、開発時に気を付けるべき最適化ポイントを解説します。

GSAPが高速に動く理由

• requestAnimationFrameを利用して描画タイミングを最適化

• GPU処理されるtransformやopacityを優先的に操作

パフォーマンスを保つための実装のコツ

• アニメーション対象を絞る
  ページ全体の要素に無闇にアニメーションを適用すると、処理が重くなります。重要な箇所に限定するのが鉄則です。

• will-changeプロパティの活用
  CSSでwill-change: transform;やwill-change: opacity;を指定すると、ブラウザが事前に最適化を行い、描画がスムーズになります。

• 画像やSVGの最適化
  高解像度の画像や複雑なSVGパスをアニメーションさせると負荷が高まります。可能な限り軽量化しましょう。

• アニメーションのduration設定
  長すぎるアニメーションはUXを損ね、短すぎると見えづらくなります。0.5〜1.2秒程度が多くのケースで最適です。

よくある落とし穴

• スクロール連動アニメーションの過剰実装
  ScrollTriggerを多用しすぎると、スクロールがガタつく原因になります。必要最低限に絞り、once: trueを使って1回だけ発火させるなど工夫が必要です。

• 非表示要素のアニメーション
  表示されていない要素を無駄に動かすと、裏側で計算が続きパフォーマンスが落ちます。autoAlphaを活用して効率的に制御しましょう。

パフォーマンス測定と改善方法

• ブラウザのDevToolsを活用
  Chrome DevToolsのPerformanceタブを使うと、フレームレートやレンダリング負荷を可視化できます。

• 軽量化サイクルを回す
  実装 → 測定 → 修正 → 再測定の流れを習慣化すると、常に快適なアニメーションを提供できます。

公式ドキュメントの活用

GSAP公式サイト

CodePenデモの参考方法

CodePenには豊富なサンプルが公開されており、動作を直接確認できます。

学習ステップ（入門→応用）

• 基本メソッドを習得

• Timelineを使って組み立て

• ScrollTriggerやSVGアニメーションに挑戦

GSAPは、CSSやjQueryだけでは難しい複雑で滑らかなアニメーションを効率的に実装できる強力なライブラリです。
基本から始め、パフォーマンスを意識しながら少しずつ応用的な表現に挑戦すれば、ユーザー体験を飛躍的に高めるWebサイトを構築できます。

もし 「自社サイトに動きのある演出を取り入れたい」、
「GSAPを活用した表現を相談したい」 といったご要望がありましたら、ぜひお気軽にドコドアまでお問い合わせください。

◎ホームページはこちら

◎お問い合わせ・ご相談はこちら