GSAP（ジーサップ、GreenSock Animation Platform）は、米国 GreenSock 社が開発する JavaScript アニメーションライブラリです。原型は 2008 年頃に ActionScript 向けに登場し、その後 Flash 衰退とともに JavaScript 版へ軸足を移して進化してきました。CSS プロパティ、SVG、Canvas、DOM 属性、JavaScript オブジェクトの数値プロパティなど、ほぼあらゆる対象を高精度かつ高パフォーマンスにトゥイーンできる点が評価されており、ブランドサイト、キャンペーン LP、インタラクティブ広告など「プロのモーション」が要求される現場で長らくデファクトの位置を保ち続けています。
この記事の目次
- GSAP の基本 API と timeline
- プラグインで広がる表現力
- なぜプロ現場で選ばれ続けるのか
- 導入の流れと注意点
- まとめ
GSAP の基本 API と timeline
GSAP の基本となるのは gsap.to、gsap.from、gsap.fromTo といったトゥイーン関数と、それらを束ねる timeline オブジェクトです。gsap.to はターゲットの現在値から指定値へ滑らかに変化させ、gsap.from は逆に「指定値から現在値へ」のアニメーションを作ります。timeline は複数のトゥイーンを順番に並べたり、特定のラベルにジャンプしたり、遅延・オーバーラップを直感的なオフセット記法で記述できるシーケンサーで、複雑な振付を破綻なく扱うために不可欠です。
イージング関数（ease）も非常に豊富で、定番の power 系・back・elastic・bounce に加え、CustomEase や CustomBounce を使えば自前のベジェ曲線をそのまま登録できます。アニメーション完了時のコールバックや、reverse・restart・seek といった再生制御も統一的に呼べるため、巻き戻し再生や中断・再開を多用する UI（モーダル、メガメニュー、ストーリーテリング型 LP など）でも安定して扱えるのが強みです。
プラグインで広がる表現力
GSAP の真価は、純正プラグイン群によって表現可能領域が大きく広がる点にあります。中でも ScrollTrigger は事実上の業界標準と言える存在で、スクロール量に応じたアニメーション、ピン留め、スクラブ再生、横スクロールセクション、視差効果などを宣言的に記述できます。MotionPath は SVG パスに沿って要素を動かすプラグイン、Draggable は慣性付きドラッグ操作を簡潔に実装するプラグインで、これらを組み合わせるとリッチな LP やゲームライクな体験を比較的少ないコードで構築できます。
さらに、テキストを文字や単語単位に分割してアニメーションさせる SplitText、SVG の形状をスムーズに変形させる MorphSVG、要素を物理的に飛ばせる Physics2D など、用途特化のプラグインが揃っています。これらの多くは以前は商用ライセンス限定でしたが、現在は Webflow による買収後にライセンスが見直され、多くのプラグインが無料で利用できるようになりました（ライセンス詳細は公式の最新情報を参照してください）。
なぜプロ現場で選ばれ続けるのか
近年は CSS の @keyframes や Web Animations API、view transitions API のように、ネイティブだけで完結できる選択肢も増えていますが、それでも GSAP がプロの現場で選ばれ続ける理由は、表現の精度・ブラウザ間の挙動の安定性・複雑な振付の扱いやすさにあります。例えば数十個の要素を波打つように動かす演出、慣性付きで自由にドラッグできるスライダー、スクロールで進行する映画的なストーリーテリングなど、CSS だけで作るとブラウザ差分やパフォーマンスチューニングに大きな手間がかかる演出を、GSAP は安定したフレームワークの上で実現させます。
また、ドキュメントの質、フォーラムでのサポート、20 年以上にわたる継続的なメンテナンスといった「信頼の積み重ね」も大きな選定理由です。広告代理店や受託制作会社のように「日々違う表現を短納期で量産する」必要がある現場では、独自実装やゼロからの最適化を避け、GSAP に振付ロジックを集約することで属人化を抑え、保守性と再現性を両立させています。
導入の流れと注意点
導入は npm install gsap が基本で、必要に応じて ScrollTrigger などのプラグインを import し、gsap.registerPlugin() で登録します。React や Vue、Svelte のようなフレームワーク内では、コンポーネントのマウント時にアニメーションを作成し、アンマウント時に kill() や revert() で確実に破棄することが重要です。これを怠ると、SPA でページ遷移するたびに古いトリガーが残り続け、メモリリークやパフォーマンス低下の原因になります。
また、ScrollTrigger を使う場合は、レイアウトの高さが動的に変わるサイト（画像遅延読み込みや無限スクロールなど）で ScrollTrigger.refresh() を適切なタイミングで呼ぶ必要があります。CSS の transform を直接 GSAP で扱う設計なので、同じ要素を CSS の transition で同時に動かすと競合します。アニメーション制御の責任を GSAP に一本化し、CSS 側では装飾的なトランジションのみに留める、といった役割分担を最初に決めておくと運用が安定します。
まとめ
GSAP は、Web アニメーション領域で 20 年近くトップランナーとして使われ続けているライブラリです。timeline、豊富なイージング、強力なプラグイン群（特に ScrollTrigger）によって、CSS だけでは扱いきれない高度な振付をシンプルな API で表現できる点が最大の魅力です。プロの制作現場で再現性とパフォーマンスを両立したいときの第一候補になります。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント