GSAPとは？Web向け高機能JavaScriptアニメーションライブラリ

ページ内ナビ

概要

GSAPは、CSS、SVG、Canvas、JavaScript objectなどの値を時間軸で変化させるframework-agnosticなanimation libraryです。tweenとtimelineを中心に、ScrollTrigger、MotionPath、Flip等のpluginを組み合わせ、複雑なsequenceやscroll-driven interactionを構築できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-30

主な特徴

tweenとtimelineでanimation sequenceを精密に制御する

gsap.to()等でpropertyを時間変化させ、timelineで複数animationの開始位置、duration、ease、repeat等をまとめて制御できます。CSS、SVG、Canvas、generic objectなど幅広い値を対象にできます。

出典：[2]

ScrollTriggerなどのpluginで高度なinteractionを追加する

ScrollTrigger、Flip、MotionPath、Draggable等のpluginを登録して、scroll連動、layout transition、path animation、drag操作などを追加できます。

出典：[2]

向いている用途

frameworkに依存せず複雑なmotion designを実装したいWeb UIに向く

React、Vue、plain JavaScript等の構成を問わず、landing page、interactive storytelling、product UIで細かなtimingとsequence制御が必要な場合に向きます。

出典：[2]

導入前の確認

無料利用可能でもOSS licenseとは区別する

READMEは商用利用を含め無料と案内していますが、package metadataはGreenSock Standard no charge licenseを示しており、MITやApache等のSPDX open-source licenseではありません。

出典：[2][3][4]

競合するvisual animation builder用途には制限がある

Webflowの現行GSAP Software License Agreementは一般のWeb site、Web application、digital interfaceでの利用を許諾する一方、Webflowのvisual animation building capabilitiesと競合するno-code visual animation tool等の用途をProhibited Usesとして定義しています。対象になり得る製品では原文を確認します。

出典：[4]

参考にした公式資料

[1]greensock/GSAP repository(2026-09-30)
[2]GSAP README(2026-09-30)
[3]GSAP 3.15.0 package metadata(2026-09-30)
[4]Webflow Product Terms — GSAP Software License Agreement(2026-09-30)

編集部からの補足

GSAP 3.15.0はcoreと従来有料だったpluginを含め無料で商用利用できますが、MIT等のOSS licenseではありません。WebflowのGSAP Software License Agreementには競合するvisual animation builder用途などへの制限があるため、利用条件を確認して採用してください。

3ステップで試す

1
GSAP 3.15.0を追加
current package versionを固定してWeb projectへ追加します。利用前にStandard licenseの適用範囲も確認します。
npm install gsap@3.15.0
2
GSAPを読み込む
core APIを読み込みます。ScrollTrigger等は必要になった時点で個別にimport・registerします。
import gsap from "gsap";
3
最小tweenを実行
対象要素をx方向へ動かす最小animationで導入を確認します。
gsap.to(".box", { x: 100, duration: 1 });

公式READMEで確認

成長

成長の推移 · 直近30日

28,724 Stars

推移データを蓄積中です。

Built with

JavaScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

animation
gsap
javascript
javascript-library
scroll

Stars: 28,724
Forks: 2,225
Watchers: 419
Open Issues: 6
所有者種別: Organization
主要言語: JavaScript
リポジトリ最終更新: 2026/04/13

概要

特徴と向いている用途

主な特徴

tweenとtimelineでanimation sequenceを精密に制御する

ScrollTriggerなどのpluginで高度なinteractionを追加する

向いている用途

frameworkに依存せず複雑なmotion designを実装したいWeb UIに向く

導入前の確認

無料利用可能でもOSS licenseとは区別する

競合するvisual animation builder用途には制限がある

参考にした公式資料

3ステップで試す

GSAP 3.15.0を追加

GSAPを読み込む

最小tweenを実行

成長

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪