devs Tools / Motion 1.0.0 / GSAP 3.15

GSAP Timeline & Scroll Story Studio: Design, validate, and export motion

Design GSAP timelines and ScrollTrigger stories in one Animation Project, validate position parameters, labels, callbacks, stagger, pin, scrub, and reduced motion, then export nine implementation formats.

devs GSAP Studio is a free local-first workspace for designing both time-based GSAP timelines and scroll-driven ScrollTrigger stories. It resolves position parameters, maps labels to scenes, validates motion quality, and exports nine implementation packages without uploading your project.

Open GSAP Studio Read the workflow

Editing, preview, validation, and ZIP generation stay in this browser
The simulator makes no external runtime requests
No arbitrary JavaScript evaluation or automatic WordPress writes

9Presets 76Rules 9Outputs 日本語

First visit? Choose a Motion pattern on the left, edit a clip in Inspector, compare devices and Reduced Motion, then review Quality before Export.

View terminology

Opening the local motion workspace…

JavaScript is required for editing and preview

The presets, output comparison, glossary, safety notes, and reference links remain readable below.

Animation workflow

From a motion idea to code and verification evidence

01

Choose a pattern

Start from one of four timeline or five scroll-story projects.

02

Arrange time and scenes

Edit targets, positions, duration, ease, labels, callbacks, and scroll ranges.

03

Preview every condition

Play, reverse, seek, change speed, compare devices, and inspect the reduced-motion final state.

04

Validate and export

Review stable Rule IDs and export code together with warnings, losses, verification, and rollback steps.

One project, two axes

Understand time and scroll without splitting the implementation

The Animation Project remains the canonical source. Timeline items compile to exact start and end times; Scroll scenes map those labels to scroll ranges. Responsive and reduced-motion policies apply to the same source.

Timeline0.00s → 4.42sTween, label, callback, stagger, overlap

Scroll Story0px → 2400pxstart, end, pin, scrub, snap, scene

FallbackReduced MotionDisable pin and scrub; preserve the readable final state

Nine reference presets

Start with a complete, inspectable Animation Project

Open the pattern library

GST-PRE-001 · Timeline

Hero Cinematic Reveal

Open the structure, settings, failures, accessibility behavior, and generated output for this pattern.

GST-PRE-002 · Timeline

Product Feature Sequence

Open the structure, settings, failures, accessibility behavior, and generated output for this pattern.

GST-PRE-003 · Timeline

Text Stagger Reveal

Open the structure, settings, failures, accessibility behavior, and generated output for this pattern.

GST-PRE-004 · Timeline

Callback & Label Lab

Open the structure, settings, failures, accessibility behavior, and generated output for this pattern.

GST-PRE-005 · Scroll Story

Pinned Image Story

Open the structure, settings, failures, accessibility behavior, and generated output for this pattern.

GST-PRE-006 · Scroll Story

Scrub Parallax

Open the structure, settings, failures, accessibility behavior, and generated output for this pattern.

GST-PRE-007 · Scroll Story

Horizontal Gallery

Open the structure, settings, failures, accessibility behavior, and generated output for this pattern.

GST-PRE-008 · Scroll Story

Sticky Metrics Story

Open the structure, settings, failures, accessibility behavior, and generated output for this pattern.

GST-PRE-009 · Scroll Story

Section Composer Journey

Open the structure, settings, failures, accessibility behavior, and generated output for this pattern.

Position parameter visualizer

See when every tween starts—not only what the expression says

A GSAP position parameter controls where an item is inserted in a timeline. The studio resolves common expressions without evaluating arbitrary JavaScript.

Expression（式）	Plain meaning	Reference point
`1.2`	Start at 1.2 seconds.	absolute time
`+=0.3`	Start 0.3 seconds after the current end.	timeline end
`<`	Start with the previous item.	previous start
`>-0.2`	Start 0.2 seconds before the previous item ends.	previous end
`scene-2+=0.1`	Start 0.1 seconds after the scene-2 label.	label

Open the full position-parameter reference.

Nine output adapters

Export the same motion contract for nine destinations

Compare every output

Adapter（出力変換）	Best for	Generated files
Vanilla ESM	npm・Vite	HTML / CSS / animation.js / package.json
CDN HTML	単一ページの確認用	1つのHTMLと導入注意
CodePen bundle	HTML・CSS・JSタブ	各タブ用テキストと設定手順
WordPress	enqueue・shortcode	scope付きプラグインひな型と復旧手順
React useGSAP	React component	useGSAP componentとCSS
Vue composable	Vue SFC	component・composable・CSS
Section Composer Motion	Section連携	Motion Contract JSONとhandoff
Project JSON	再編集・監査	正本Project・compiled result・検証結果
QA Runbook	導入確認	Install・Verify・Performance・Accessibility・Rollback

Every adapter reports dependencies, warnings, conversion losses, the tested GSAP version, and rollback context. GSAP itself is not bundled.

Public knowledge base

Inspect the contract behind the generated code

9 PatternsTargets, timeline items, scenes, and responsive behavior. 76 Quality RulesStable IDs, symptoms, evidence, impact, and fixes. 27 ReferencesPositions, start/end, labels, callbacks, and eases. 9 OutputsDependencies, files, setup, cleanup, and rollback.

Glossary

Terms used in the workspace

Timeline（タイムライン／時間軸）: An ordered group of tweens, labels, and callbacks that share playback controls.
Tween（トゥイーン／値の変化）: A change from one set of visual values to another over a duration.
Label（ラベル／時間の目印）: A named point on the timeline that can be reused for insertion, seeking, and scene mapping.
Callback（コールバック／時点通知）: An allowlisted event emitted at a defined timeline point; arbitrary function bodies are not stored.
ScrollTrigger（スクロールトリガー）: The GSAP plugin that connects animation progress or actions to scroll positions.
Pin（ピン／要素の固定）: Keeps an element visually fixed while a defined scroll range passes.
Scrub（スクラブ／スクロール同期）: Links animation progress continuously to scroll progress.
Ease（イーズ／速度変化）: A curve that controls acceleration and deceleration during a tween.
Stagger（スタガー／時間差）: A delay pattern applied across multiple matching elements.
Reduced Motion（動きを減らす設定）: An operating-system preference requesting less non-essential motion.

Scope and limits

What the offline simulator does—and does not prove

Covered

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

Requires target-site testing

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

FAQ

Before using generated motion in production

Does the preview execute GSAP?

No. It is a deterministic offline simulator for timeline relationships and major visual properties. Generated production code targets GSAP 3.15, so verify it on the real page.

Is the project uploaded?

No. Editing, persistence, simulation, validation, and export run locally in your browser. Only explicitly downloaded files leave the workspace.

Does the WordPress output install GSAP?

No. It expects policy-approved script handles registered by the site. Without them, semantic content remains visible in its final state.

Can validation guarantee performance and accessibility?

No. It detects versioned contract risks, but production still requires keyboard, zoom, reduced-motion, mobile, browser, and performance testing.