Webアニメーションにおいて「柔らかく滑らかに動く」演出は、訪問者の心を掴む大きな要素となっています。その中でも注目を集めているのが、ハイパフォーマンスなJavaScriptライブラリ「GSAP（GreenSock Animation Platform）」です。本記事では、GSAPの基本的な使い方からReactとの連携、商用利用時の注意点、さらには実際の実装例や参考サイトまで、初心者にも分かりやすく丁寧に解説していきます。
GSAPとは？基本のキホン
GSAP（GreenSock Animation Platform）は、JavaScriptでHTML・CSS・SVG要素をアニメーションさせるための強力なライブラリです。高速かつ滑らかな動作、そして豊富なアニメーション機能が評価され、GoogleやAppleなどの大手企業のプロダクトにも利用されています。
特徴としては以下の通りです：
- フレーム単位での精密なアニメーション制御
- 軽量で高速な描画
- 多様なトランジション（イージング）効果
- タイムライン制御が容易
CDNリンク1つで始められる手軽さもあり、初心者でも比較的簡単に扱えるのが魅力です。
GSAP入門｜基本の使い方
CDNを使った導入方法
まずは公式のCDNを読み込んで、基本的なアニメーションを実装してみましょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>基本アニメーションの実装例
gsap.to(".box", {
x: 200,
duration: 1,
ease: "power2.out"
});このように、.boxクラスの要素を1秒かけて横に200px動かすアニメーションが書けます。
ReactでのGSAP利用方法（Gsap/React）
React環境でもGSAPは問題なく動作します。useRefやuseLayoutEffectを活用して、DOM操作を適切に行うことがポイントです。
import { useLayoutEffect, useRef } from "react";
import { gsap } from "gsap";
function MyComponent() {
const el = useRef();
useLayoutEffect(() => {
gsap.to(el.current, { x: 100, duration: 1 });
}, []);
return <div ref={el} className="box">Animate me</div>;
}Reactでは、アニメーションの対象にrefを付けることで、コンポーネントのライフサイクルと連携しながら動きを加えることができます。
スクロールアニメーションの実装（gsap スクロールアニメーション）
GSAPには、スクロール連動アニメーションを可能にする「ScrollTrigger」というプラグインがあります。
ScrollTriggerの基本
<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 center",
end: "bottom top",
scrub: true
},
x: 400,
duration: 3
});スクロールに応じて要素が移動したり、フェードインしたりする演出が可能です。
横スクロールのアニメーション（gsap 横スクロール）
最近のトレンドでもある横スクロールアニメーションもGSAPで実装できます。ScrollTriggerと組み合わせて横方向にコンテンツを流す方法が一般的です。
gsap.to(".horizontal", {
xPercent: -100,
scrollTrigger: {
trigger: ".scroll-container",
pin: true,
scrub: 1,
end: "+=3000"
}
});商用利用はできる？ライセンスの注意点（gsap 商用利用）
GSAPは基本的に無料で使えますが、一部機能やプラグインには有料ライセンスが必要です。
商用で無料利用できるケース
- GSAP本体、Tween、Timeline、ScrollTrigger など基本機能は無料
- 自社サービスやクライアント案件でも利用可
有料ライセンスが必要なケース
- Club GreenSock 専用プラグイン（MorphSVG, SplitText, ScrollSmoother など）
- SaaSなど再販・再配布されるWebアプリへの組み込み
公式サイト：https://greensock.com/licensing/
GSAPのおすすめ参考サイト（gsap 参考サイト）
実際のコードやアニメーションを見て学べる参考サイトも充実しています。
おすすめ参考サイト一覧
- GreenSock公式： https://greensock.com/
- CodePen（実装例が豊富）：https://codepen.io/
- Codrops：モダンなアニメーションのトレンドが学べる
GSAPの便利なプラグイン紹介（gsap プラグイン）
GSAPはプラグインが豊富で、より高度な表現が可能になります。
主なプラグイン
- ScrollTrigger：スクロール連動アニメーション
- Draggable：要素をドラッグで操作可能に
- MotionPath：SVGパスに沿った動き
- SplitText：テキストを1文字単位でアニメーション
- ScrollSmoother（有料）：なめらかなスクロール表現
まとめ｜GSAPは入門しやすく、商用でも強力な武器になる
GSAPは「かっこよくて滑らかなWebサイトを作りたい」人にとって、非常に強力なツールです。基本操作は意外とシンプルで、Reactなどのフレームワークとも相性が良く、拡張性にも優れています。
商用利用時のライセンスだけ注意すれば、無料で多くの機能が使え、案件対応の幅も広がるでしょう。まずは簡単なアニメーションから始めて、自分なりのGSAP表現を育ててみてください。
