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	Single-page review	One HTML file and setup notes
CodePen bundle	HTML, CSS, and JS tabs	Tab contents and setup instructions
WordPress	Enqueue and shortcode	Scoped plugin scaffold and recovery steps
React useGSAP	React component	useGSAP component and CSS
Vue composable	Vue SFC	Component, composable, and CSS
Section Composer Motion	Section integration	Motion Contract JSON and handoff
Project JSON	Re-editing and audits	Canonical project, compiled result, and validation
QA Runbook	Installation review	Install, Verify, Performance, Accessibility, and 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 parameters and compiled times
Relationships among labels, callbacks, and scenes
Core transform, opacity, and clip-path properties
Viewport and Reduced Motion policies
Quality findings with Rule IDs and nine generated formats

Requires target-site testing

Rendering with the real fonts, images, and DOM
Safari, Firefox, iOS, and Android
Conflicts with themes, page builders, and smooth scrolling
Core Web Vitals and long-session performance
GSAP, plugin, and CSP installation policies

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.