GSAP
デザイン＆クリエイティブ
GreenSock
無料API
概要
プロフェッショナルグレードのJavaScriptアニメーションライブラリ。1100万以上のウェブサイトを支え、圧倒的なパフォーマンスとScrollTriggerスクロールアニメーションで知られる。無料で使用可能（商用ライセンスはユーザー数に基づく）
対応プラットフォーム
WebアプリAPI
利用可能なプラットフォーム：Webアプリ、API。
主な機能
強力なタイムラインベースのアニメーションシーケンス
スクロール駆動アニメーションのScrollTrigger
MorphSVG、MotionPath、DrawSVG、Textなどのプレミアムプラグイン
極めて高速なパフォーマンス（モバイルでも60fps）
軽量コア（約10KB gzipped）+ モジュラープラグインアーキテクチャ
IE11を含むクロスブラウザ対応
料金
free
ほとんどの用途で無料
paid
業務利用には商用ライセンスが必要（ユーザー数に基づく）
活用シーン
WebサイトアニメーションとインタラクティブUI要素
スクロールトリガーアニメーションとパララックス効果
SVGアニメーションとモーショングラフィックス
ゲームUIとインタラクティブストーリーテリング
メリット
実績のあるWebアニメーションの業界標準
低スペックデバイスでも優れたパフォーマンス
高度なアニメーションニーズに対応する豊富なプラグインエコシステム
優れたドキュメントと活発なコミュニティ
デメリット
プレミアムプラグインには有料のClub GreenSockメンバーシップが必要
商用ライセンスは小規模チームにはわかりにくい場合がある
公式のTypeScript型定義なし（コミュニティ保守）
最新情報
2026年7月：GSAPは引き続き主要なWebアニメーションライブラリとして活発に開発中
5ステップで始める
5 ステップで設定完了
5ステップで始める
5 ステップで設定完了
1
npmでインストール
npmまたはyarnでGSAPをプロジェクトに追加。
npm
npm install gsap2
GSAPをインポート
JavaScriptファイルにGSAPをインポート。
JavaScript
import { gsap } from "gsap";3
基本アニメーションを作成
シンプルなトゥイーンで要素をアニメーション。
JavaScript
gsap.to(".box", { x: 200, duration: 1, rotation: 360 });4
ScrollTriggerを追加
スクロール位置に基づいてアニメーションをトリガー。
JavaScript
gsap.to(".section", { scrollTrigger: ".section", y: -100, opacity: 1 });5
タイムラインを構築
タイムラインで複数のアニメーションを連続実行。
JavaScript
const tl = gsap.timeline(); tl.to(".a", { x: 100 }).to(".b", { y: 50 });関連ツール（デザイン＆クリエイティブ）
Canva AI
Canva
Canva組み込みのAIデザインアシスタント。ポスター、プレゼン資料などをワンクリックで生成
Figma AI
Figma
Figmaに組み込みのAIデザイン機能。ワンクリックプロトタイピング、自動レイアウト、スマートレイヤー命名など
Miora
Tencent Design
Tencent Design が提供する全方位 AI クリエイティブスタジオ。画像/動画/UI/3D 生成と永続メモリを搭載
Framer
Framer
AI駆動のデザイン＆公開一体型プラットフォーム。キャンバス上で直接デザインしワンクリックでレスポンシブサイトを公開、AIがプロンプトからページ生成・多言語化・A/Bテストを行い、CMS・SEO・グローバルCDNホスティングを内蔵。無料から、Basicは月$10