AIとつくる、実践プログラミング・コーディングメディア

devs Tools / Motion 1.0.0 / GSAP 3.15

GSAP Timeline & Scroll Story Studio：動きを設計・検証・出力

GSAP TimelineとScrollTriggerの時間軸・スクロール軸を同じAnimation Projectで可視化し、position parameter、label、callback、stagger、pin、scrub、reduced motionを検証して9形式へ出力します。

devs GSAP Studioは、時間で進むGSAP Timelineと、スクロールで進むScrollTriggerを1つのAnimation Projectで設計する無料ツールです。position parameter（要素を置く時間の指定）、label（時間の目印）、callback（特定時点の通知）、pin（固定）、scrub（スクロール同期）を可視化し、品質を検査して9形式へ出力します。

GSAP Studioを開く 使い方を先に見る
  • 編集・プレビュー・検査・ZIP生成はブラウザ内で完結
  • プレビュー中の外部通信なし
  • 任意JavaScriptを実行せず、WordPressも自動変更しない
9Presets 76Rules 9Outputs English

初めて使う方へ 左のMotion pattern（動きのひな型）を選び、Timeline上のclipを押してInspectorで調整します。端末幅とReduced Motionを確認し、Qualityを見てからExportへ進みます。

専門用語を見る

ブラウザ内のモーション編集画面を準備しています…

Animation workflow

動きのアイデアから実装コードと確認記録まで

01

動きのひな型を選ぶ

4つのTimelineまたは5つのScroll Storyから、近い動きを選びます。

02

時間とsceneを整える

対象、開始位置、時間、ease、label、callback、scroll範囲を調整します。

03

利用条件ごとに確認する

再生・逆再生・seek・速度変更を試し、端末幅と動きを減らす設定を確認します。

04

検査して書き出す

固定Rule IDの警告を確認し、変換損失・検証・元に戻す手順と一緒にコードを保存します。

One project, two axes

時間軸とスクロール軸を分断せずに設計する

Animation Projectを正本にし、Timeline itemを正確な開始・終了時間へ変換します。Scroll Storyでは同じlabelをスクロール範囲へ対応させ、レスポンシブと動きを減らす設定も同じ正本から生成します。

Timeline0.00s → 4.42sTween・label・callback・stagger・重なり
Scroll Story0px → 2400pxstart・end・pin・scrub・snap・scene
FallbackReduced Motionpinとscrubを止め、読める最終状態を保持

Nine reference presets

構造を確認できる9つのAnimation Projectから始める

9パターンの詳しい説明
GST-PRE-001 · Timeline

Hero Cinematic Reveal

見出し・本文・CTA・ビジュアルをlabelで重ねて表示

 GST-PRE-002 · Timeline

Product Feature Sequence

複数の機能カードをstaggerとoverlapで順に表示

 GST-PRE-003 · Timeline

Text Stagger Reveal

行や文字の要素を時間差で表示

 GST-PRE-004 · Timeline

Callback & Label Lab

label・callback・seek・reverseの関係を確認

 GST-PRE-005 · Scroll Story

Pinned Image Story

画像を固定して説明をsceneごとに切り替え

 GST-PRE-006 · Scroll Story

Scrub Parallax

スクロール量と複数速度の視差を同期

 GST-PRE-007 · Scroll Story

Horizontal Gallery

縦スクロールを横方向ギャラリーへ対応

 GST-PRE-008 · Scroll Story

Sticky Metrics Story

数値とprogressを固定領域で切り替え

 GST-PRE-009 · Scroll Story

Section Composer Journey

Section ComposerのSection IDをsceneへ接続

Position parameter visualizer

式だけでなく、各Tweenが何秒に始まるかを確認する

position parameter（ポジションパラメーター）は、Timelineのどの時点へ動きを置くかを決める指定です。このツールは任意JavaScriptを実行せず、主要な式を実際の秒数へ変換します。

Expression（式）日本語の意味基準
1.2Timelineの1.2秒から開始absolute time
+=0.3現在の末尾から0.3秒後timeline end
<直前のitemと同時に開始previous start
>-0.2直前のitemが終わる0.2秒前previous end
scene-2+=0.1scene-2というlabelから0.1秒後label

数値・相対指定・label・percentageの解決規則を詳しく見る。

Nine output adapters

同じ動きの契約を9つの実装先へ変換する

9つの出力形式を比較
Adapter（出力変換）向いている場面主な生成物
Vanilla ESMnpm・ViteHTML / CSS / animation.js / package.json
CDN HTML単一ページの確認用1つのHTMLと導入注意
CodePen bundleHTML・CSS・JSタブ各タブ用テキストと設定手順
WordPressenqueue・shortcodescope付きプラグインひな型と復旧手順
React useGSAPReact componentuseGSAP componentとCSS
Vue composableVue SFCcomponent・composable・CSS
Section Composer MotionSection連携Motion Contract JSONとhandoff
Project JSON再編集・監査正本Project・compiled result・検証結果
QA Runbook導入確認Install・Verify・Performance・Accessibility・Rollback

各Adapterには依存関係、warning（注意）、loss（変換損失）、確認したGSAP version、rollback（元に戻す手順）を残します。GSAP本体は同梱しません。

Public knowledge base

生成コードの根拠を公開リファレンスで確認する

9 PatternsTarget、Timeline item、scene、レスポンシブ動作。 76 Quality Rules固定ID、症状、根拠、影響、安全な修正。 27 Referencesposition、start/end、label、callback、ease。 9 Outputs依存関係、ファイル、導入、cleanup、rollback。

Glossary

画面に出てくる英語・専門用語の意味

Timeline（タイムライン／時間軸）
複数のTween、label、callbackを時間順にまとめ、再生・停止・逆再生などを一括操作する仕組みです。
Tween（トゥイーン／値の変化）
位置、透明度、大きさなどを、指定した時間をかけて別の値へ変化させる1つの動きです。
Label（ラベル／時間の目印）
Timeline上の時点に付ける名前です。別の動きを置く基準、seek先、Scroll sceneの対応点に使います。
Callback（コールバック／時点通知）
開始・更新・完了などの時点で通知する仕組みです。このツールは任意の関数本文を保存せず、許可したイベント名だけを扱います。
ScrollTrigger（スクロールトリガー）
画面のスクロール位置とアニメーションの開始・進行・終了を結び付けるGSAP pluginです。
Pin（ピン／要素の固定）
指定したスクロール範囲を通過する間、要素を画面内の位置へ固定する動作です。
Scrub（スクラブ／スクロール同期）
アニメーションの進み具合をスクロール量へ連続的に同期させる設定です。
Ease（イーズ／速度変化）
Tweenの途中で加速・減速する割合を決める速度曲線です。
Stagger（スタガー／時間差）
複数要素を同時ではなく、一定の間隔で順番に動かす設定です。
Reduced Motion（動きを減らす設定）
アニメーションによる負担を減らすための端末設定です。pin・scrubを止め、内容が読める最終状態を表示します。

Scope and limits

オフラインシミュレーターで確認できること・できないこと

確認できること

  • position parameterとcompiled time
  • label・callback・sceneの関係
  • 主要なtransform・opacity・clip-path
  • 端末幅とReduced Motionの方針
  • Rule ID付きの品質findingと9形式の生成物

実サイト確認が必要なこと

  • 実際のフォント・画像・DOMによる見た目
  • Safari・Firefox・iOS・Android
  • テーマ・Page Builder・smooth-scrollとの競合
  • Core Web Vitalsと長時間利用時の性能
  • GSAP本体・plugin・CSPの導入方針

FAQ

生成した動きを本番で使う前によくある質問

プレビューではGSAP本体を実行していますか？

実行していません。時間関係と主要な見た目を理解するための決定論的なオフラインシミュレーターです。生成コードはGSAP 3.15向けなので、実ページで最終確認してください。

入力したAnimation Projectは外部へ送信されますか？

送信しません。編集、保存、シミュレーション、検査、出力はブラウザ内で行います。自分で保存したファイルだけがワークスペース外へ出ます。

WordPress出力がGSAPを自動インストールしますか？

しません。サイト側で承認済みのGSAPとScrollTriggerのscript handleを登録する前提です。未登録でも意味のある本文は最終状態で表示します。

Quality Guardを通れば性能・アクセシビリティは保証されますか？

保証ではありません。契約上のリスクを固定ルールで検出しますが、本番ではキーボード、200%表示、動きを減らす設定、mobile、各browser、性能の確認が必要です。