GSAP PlaygroundGetting Started → gsap.to()gsap.to() animates an element from its current state to the values you specify. The first argument is a CSS selector or DOM element. The second is a vars object with target values and a duration in seconds. Edit the values and watch the box move.Related Tools
JavaScript Playground60 lessons · DOM · Async · Canvas
CSS Animation GeneratorKeyframe animation builder
React PlaygroundLearn React with a live code editor
Next.js PlaygroundApp Router sandbox
CSS PlaygroundLearn CSS with a live editor
SVG Motion StudioTimeline SVG animator
SVG Animation GeneratorCSS, SMIL & GSAP
Code ScreenshotBeautiful code imagesGSAP Playground — Learn Web Animation from Tweens to ScrollTrigger
A free interactive GSAP playground with 55 guided lessons across 18 chapters, a live JavaScript editor, instant visual preview, and a Replay button. Learn gsap.to(), timelines, stagger, ScrollTrigger, keyframes, gsap.utils, responsive animation, official GSAP plugins, and real animation patterns with no install and no setup.
What You Can Practice
About this tool
Learn GSAP by Writing Code and Watching Animations Play
GSAP (GreenSock Animation Platform) is the industry-standard JavaScript animation library — used by Google, Nike, Awwwards winners, and countless production websites. It's fast, reliable, and works in every browser. But learning it by reading documentation alone is slow because the key insight is seeing what each property and method does, not just understanding the syntax.
This GSAP Playground puts a live code editor next to a visual preview. Write gsap.to(".box", { x: 200 }), watch the box move, edit the duration, change the ease, add a second tween, build a timeline — and see every change play out immediately. A Replay button resets all animations and runs your code from the beginning whenever you want to watch it again.
The 55 structured lessons are organized into 18 chapters. Each lesson starts with a concept explanation, loads a working code example into the editor, and gives you pre-built demo elements to animate against. Picker lessons show multiple variants of the same concept so you can compare ease types, stagger directions, position parameters, utility helpers, responsive patterns, or plugin workflows by switching between them without rewriting code.
What the GSAP Lessons Cover
| Chapter | Lessons | What You Learn |
|---|---|---|
| Getting Started | 4 lessons | gsap.to(), gsap.from(), gsap.fromTo(), duration and delay. |
| Properties | 4 lessons | x/y transform, rotation, scale, opacity, autoAlpha, and animating CSS properties and colours. |
| Easing | 3 lessons | Power eases (in/out/inOut), bounce, elastic, back, steps, and linear. |
| Timelines | 4 lessons | gsap.timeline(), position parameter (<, -=, +=), defaults, and play/pause/reverse/restart controls. |
| Stagger | 2 lessons | Basic stagger timing and stagger from (start, end, center). |
| Repeat & Yoyo | 2 lessons | repeat, repeatDelay, and yoyo for looping and ping-pong animations. |
| Callbacks | 2 lessons | onComplete, onStart, and onUpdate — reading tween progress in real time. |
| ScrollTrigger | 4 lessons | trigger and toggleActions, toggleClass, scrub for scroll-linked animation, and pin for scroll-driven storytelling. |
| Keyframes | 2 lessons | Array keyframes for sequential states and percent keyframes for CSS-@keyframes-style control. |
| Real Patterns | 4 lessons | Card reveal, hero entrance, pulsing loader, and animated number counter. |
| GSAP Utils | 2 lessons | gsap.utils helpers for mapping, clamping, wrapping, interpolation, arrays, and reusable animation utilities. |
| Responsive | 2 lessons | matchMedia patterns, reduced motion handling, and responsive animation changes. |
| Plugins | 5 lessons | All-plugin availability plus CustomEase, ScrollToPlugin, MotionPathPlugin, and Flip workflows. |
| Interaction Plugins | 3 lessons | Draggable, Observer, and InertiaPlugin for pointer, gesture, and momentum interactions. |
| Text Plugins | 3 lessons | SplitText, TextPlugin, and ScrambleTextPlugin for kinetic text and typewriter effects. |
| SVG Plugins | 3 lessons | DrawSVGPlugin, MorphSVGPlugin, and CSSRulePlugin for SVG and pseudo-element animation. |
| Physics & Ease Plugins | 3 lessons | CustomBounce, CustomWiggle, Physics2DPlugin, PhysicsPropsPlugin, and EasePack. |
| Helper & Integration Plugins | 3 lessons | ScrollSmoother, MotionPathHelper, GSDevTools, PixiPlugin, and EaselPlugin usage patterns. |
Why GSAP Is Worth Learning
CSS transitions and CSS animations handle simple state changes well. But when animations need to be sequenced, controlled by user input, driven by scroll position, synced to data, or reversed programmatically, CSS becomes difficult to manage. GSAP was built exactly for these situations.
A GSAP timeline lets you chain 10 animations and control the entire sequence with one .play() or .reverse() call. ScrollTrigger links any animation to scroll position with two lines of configuration. The stagger system turns one tween call into a cascading animation across dozens of elements. These are things that would require significant custom JavaScript to replicate in CSS.
GSAP is also consistent across browsers and handles edge cases that trip up CSS transitions — such as animating from a partially-completed state, reversing mid-tween, or compositing multiple transform properties. Once you understand the core methods (to, from, fromTo, timeline, stagger) you can read almost any GSAP code and quickly produce production-quality animation.
Learning here gives you a fast feedback loop: write the code, hit Replay, adjust a number, Replay again. That iteration speed makes the relationship between code and motion intuitive in a way that reading the GSAP documentation alone cannot replicate.
How to Use the GSAP Playground
- 1Start with gsap.to()The first lesson is intentionally small. Change the x value, change the duration, add a second property — watch each edit play out.
- 2Use the Replay button freelyGSAP animations play once by default. Click Replay whenever you want to watch the animation from the beginning without reloading the page.
- 3Switch between Picker variantsEase and position parameter lessons show multiple options. Click each variant to load that code and see exactly how power2.in differs from power2.out.
- 4Scroll in the preview for ScrollTrigger lessonsScrollTrigger lessons target #scroll-box below the main demo area. Scroll down inside the preview pane to trigger, scrub, or pin the animation.
- 5Edit the demo elements freelyThe pre-built .box, .heading, .subtitle, .btn, and .card elements are just starting points. Target them differently, add more tweens, or modify properties not in the lesson.
- 6Apply the Real Patterns to your own projectsThe final chapter covers card reveal, hero entrance, pulsing loader, and animated counter. These are ready to copy and adapt — just change the selectors and values to match your markup.
Who This GSAP Playground Is For
If you are new to JavaScript, start with the JavaScript Playground to get comfortable with functions, objects, and callbacks. Then use this GSAP Playground to learn animation. After GSAP, the React Playground shows how to integrate animation into component-based UIs using useRef and useEffect with GSAP's context cleanup.
Frequently Asked Questions
No. The playground loads GSAP and official plugin files from the local project bundle inside a sandboxed iframe. You write animation code and see the result instantly — no Node.js, npm, CDN request, or build step required.
The 55 lessons cover gsap.to(), gsap.from(), gsap.fromTo(), duration, delay, x/y, rotation, scale, opacity, CSS properties, eases, timelines, stagger, callbacks, ScrollTrigger, keyframes, real animation patterns, gsap.utils, responsive animation, reduced motion, and official plugin workflows across interaction, text, SVG, physics, helper, and renderer categories.
The playground loads GSAP 3 from the installed package, with official plugin files copied into the local public bundle. Available plugin globals are registered automatically before lesson code runs.
Click the green Replay button in the preview pane. It kills all current GSAP tweens, clears inline styles from the demo elements, and re-executes your code from scratch.
Yes. Clear the editor and write anything. The pre-built elements (.box, .heading, .subtitle, .btn, .card, #scroll-box) are always present in the preview as animation targets.
No. GSAP made the formerly Club-only plugins free, and this playground now includes official plugin files from the installed GSAP package, including MorphSVG, SplitText, DrawSVG, Draggable, ScrollSmoother, InertiaPlugin, and more.
Basic JavaScript helps — understanding variables, functions, objects, and arrow functions makes the lessons easier. GSAP itself is approachable, but the callbacks and method chaining in the later chapters assume some comfort with JavaScript.
The preview iframe has a scroll zone below the main demo elements. Scroll down inside the preview pane to activate the ScrollTrigger. For scrub lessons, scroll slowly to drive the animation frame by frame.