GSAP
Knowledge base from the GSAP (GreenSock Animation Platform) documentation — core API (gsap.to/from/timeline), Tween/Timeline instance methods, utility methods, easing, and every official plugin (ScrollTrigger, Draggable, Flip, SplitText, MotionPathPlugin, Observer, ScrollSmoother, Inertia, MorphSVG, DrawSVG, and more). Use when building JS/CSS animations with GSAP, choosing between plugins for an effect, looking up a method/property signature, or debugging timeline sequencing, scroll-linked, or drag interactions.
GSAP
Package: gsap | Sections: GSAP Core, Timeline, Tween, Utils, Eases, Helper Functions, Plugins, Guides | Chapters: 411 | Generated: 2026-08-25
How to Use This Skill
- Without arguments — load core patterns for reference
- With a topic — ask about
ScrollTrigger,stagger,Draggable, or another indexed topic; I find and read the relevant chapter - With a method/plugin name — ask for
gsap.to(),Flip.from(),ch331; I load that specific chapter - Browse — ask "what chapters do you have?" to see the full index
When you ask about something not covered in Core Patterns below, I will read the relevant chapter file before answering.
Core Patterns & Conventions
Everything is a tween or a timeline. gsap.to(target, {vars}) animates target's properties toward the values in vars from their current state; gsap.from()/gsap.fromTo() control the starting state explicitly; gsap.set() applies values instantly with no animation. A gsap.timeline() is a container that sequences and nests tweens under one controllable playhead — reach for one the moment two or more animations need relative timing.
Targets are flexible. A CSS selector string, a single element, an array/NodeList, or a plain object (for tweening arbitrary JS values) are all valid targets — GSAP resolves selectors via document.querySelectorAll by default, or a scoped selector function from gsap.utils.selector()/gsap.context().
Sequencing uses labels and the position parameter, not hardcoded times. Inside a timeline, the second argument to .to()/.from()/.set() ("+=0.5", "<", "myLabel") places the tween relative to the previous tween or a named label — this keeps sequences resilient when an earlier tween's duration changes. "<" = start of previous tween, ">" = end of previous tween (default).
Plugins must be registered before use. gsap.registerPlugin(ScrollTrigger, Draggable, ...) once per session (per plugin) — using plugin-specific properties without registering silently does nothing. Most plugins ship as separate imports from the gsap/ package (e.g. import { ScrollTrigger } from "gsap/ScrollTrigger"); GSAP core plugins (CSS, Attributes, Snap, Modifiers, EndArray) are bundled and don't need separate registration.
Cleanup in component frameworks uses gsap.context(). Scope all tween/ScrollTrigger creation inside a context tied to a DOM ref, and call context.revert() on unmount — this is the standard, and near-mandatory, pattern in React/Vue/Svelte to avoid leaked tweens and duplicate ScrollTriggers across remounts.
Responsiveness uses gsap.matchMedia(), not manual window.matchMedia + resize listeners — each breakpoint block gets its own setup and automatic cleanup when the breakpoint no longer matches.
Multi-target choreography uses stagger, not manual delay loops — stagger accepts a number (seconds between each target) or an object ({each, from, grid, ease}) for direction- and grid-aware cascades.
ScrollTrigger has two distinct modes: toggleActions (play/pause/resume/reverse on enter/leave the trigger zone) for animations that play once, and scrub (playhead tied directly to scroll position) for parallax/progress-driven motion — these are not interchangeable, pick based on whether the animation should play or track.
Prefer transform properties. x/y/scale/rotation (GPU-accelerated, no layout) over left/top/width/height wherever the visual result is equivalent.
Chapter Index
intro
| # | Title |
|---|---|
| ch001 | GSAP Overview (Animate Anything) |
GSAP Core
| # | Title |
|---|---|
| ch002 | The gsap Object |
| ch003 | Attributes (Core Plugin) |
| ch004 | CSS (Core Plugin) |
| ch005 | EndArray (Core Plugin) |
| ch006 | Modifiers (Core Plugin) |
| ch007 | Snap (Core Plugin) |
| ch008 | gsap.config() |
| ch009 | gsap.context() |
| ch010 | gsap.defaults() |
| ch011 | gsap.delayedCall() |
| ch012 | gsap.effects |
| ch013 | gsap.exportRoot() |
| ch014 | gsap.from() |
| ch015 | gsap.fromTo() |
| ch016 | gsap.getById() |
| ch017 | gsap.getProperty() |
| ch018 | gsap.getTweensOf() |
| ch019 | gsap.globalTimeline |
| ch020 | gsap.isTweening() |
| ch021 | gsap.killTweensOf() |
| ch022 | gsap.matchMedia() |
| ch023 | gsap.matchMediaRefresh() |
| ch024 | gsap.parseEase() |
| ch025 | gsap.quickSetter() |
| ch026 | gsap.quickTo() |
| ch027 | gsap.registerEase() |
| ch028 | gsap.registerEffect() |
| ch029 | gsap.registerPlugin() |
| ch030 | gsap.set() |
| ch031 | gsap.ticker |
| ch032 | gsap.timeline() |
| ch033 | gsap.to() |
| ch034 | gsap.updateRoot() |
| ch035 | gsap.utils |
| ch036 | gsap.version |
Timeline
Tween
| # | Title |
|---|---|
| ch097 | Tween (Overview) |
| ch098 | Tween.data |
| ch099 | Tween.delay() |
| ch100 | Tween.duration() |
| ch101 | Tween.endTime() |
| ch102 | Tween.eventCallback() |
| ch103 | Tween.globalTime() |
| ch104 | Tween.invalidate() |
| ch105 | Tween.isActive() |
| ch106 | Tween.iteration() |
| ch107 | Tween.kill() |
| ch108 | Tween.pause() |
| ch109 | Tween.paused() |
| ch110 | Tween.play() |
| ch111 | Tween.progress() |
| ch112 | Tween.ratio |
| ch113 | Tween.repeat() |
| ch114 | Tween.repeatDelay() |
| ch115 | Tween.restart() |
| ch116 | Tween.resume() |
| ch117 | Tween.reverse() |
| ch118 | Tween.reversed() |
| ch119 | Tween.revert() |
| ch120 | Tween.scrollTrigger |
| ch121 | Tween.seek() |
| ch122 | Tween.startTime() |
| ch123 | Tween.targets() |
| ch124 | Tween.then() |
| ch125 | Tween.time() |
| ch126 | Tween.timeScale() |
| ch127 | Tween.totalDuration() |
| ch128 | Tween.totalProgress() |
| ch129 | Tween.totalTime() |
| ch130 | Tween.vars |
| ch131 | Tween.yoyo() |
Utils
| # | Title |
|---|---|
| ch132 | Utility Methods (Overview) |
| ch133 | gsap.utils.checkPrefix() |
| ch134 | gsap.utils.clamp() |
| ch135 | gsap.utils.distribute() |
| ch136 | gsap.utils.getUnit() |
| ch137 | gsap.utils.interpolate() |
| ch138 | gsap.utils.mapRange() |
| ch139 | gsap.utils.normalize() |
| ch140 | gsap.utils.pipe() |
| ch141 | gsap.utils.random() |
| ch142 | gsap.utils.selector() |
| ch143 | gsap.utils.shuffle() |
| ch144 | gsap.utils.snap() |
| ch145 | gsap.utils.splitColor() |
| ch146 | gsap.utils.toArray() |
| ch147 | gsap.utils.unitize() |
| ch148 | gsap.utils.wrap() |
| ch149 | gsap.utils.wrapYoyo() |
Eases
| # | Title |
|---|---|
| ch150 | Easing (Overview) |
| ch151 | CustomBounce |
| ch152 | CustomEase |
| ch153 | CustomWiggle |
| ch154 | ExpoScaleEase |
| ch155 | RoughEase |
| ch156 | SlowMo |
| ch157 | SteppedEase |
Helper Functions
Plugins overview
| # | Title |
|---|---|
| ch187 | Plugins Overview |
Plugin — CSSRulePlugin
| # | Title |
|---|---|
| ch188 | CSSRulePlugin (deprecated) |
| ch189 | CSSRulePlugin.getRule() (deprecated) |
Plugin — Draggable
| # | Title |
|---|---|
| ch190 | Draggable (Overview) |
| ch191 | Draggable.addEventListener() |
| ch192 | Draggable.applyBounds() |
| ch193 | Draggable.autoScroll |
| ch194 | Draggable.deltaX |
| ch195 | Draggable.deltaY |
| ch196 | Draggable.disable() |
| ch197 | Draggable.enable() |
| ch198 | Draggable.enabled() |
| ch199 | Draggable.endDrag() |
| ch200 | Draggable.endRotation |
| ch201 | Draggable.endX |
| ch202 | Draggable.endY |
| ch203 | Draggable.getDirection() |
| ch204 | Draggable.isPressed |
| ch205 | Draggable.isThrowing |
| ch206 | Draggable.kill() |
| ch207 | Draggable.lockAxis |
| ch208 | Draggable.lockedAxis |
| ch209 | Draggable.maxRotation |
| ch210 | Draggable.maxX |
| ch211 | Draggable.maxY |
| ch212 | Draggable.minRotation |
| ch213 | Draggable.minX |
| ch214 | Draggable.minY |
| ch215 | Draggable.pointerEvent |
| ch216 | Draggable.pointerX |
| ch217 | Draggable.pointerY |
| ch218 | Draggable.rotation |
| ch219 | Draggable.startDrag() |
| ch220 | Draggable.startX |
| ch221 | Draggable.startY |
| ch222 | Draggable.create() |
| ch223 | Draggable.get() |
| ch224 | Draggable.hitTest() |
| ch225 | Draggable.timeSinceDrag() |
| ch226 | Draggable.target |
| ch227 | Draggable.tween |
| ch228 | Draggable.update() |
| ch229 | Draggable.vars |
| ch230 | Draggable.x |
| ch231 | Draggable.y |
| ch232 | Draggable.zIndex |
Plugin — DrawSVG
| # | Title |
|---|---|
| ch233 | DrawSVGPlugin (Overview) |
| ch234 | DrawSVGPlugin.getLength() |
| ch235 | DrawSVGPlugin.getPosition() |
Plugin — EaselPlugin
| # | Title |
|---|---|
| ch236 | EaselPlugin |
Plugin — Flip
| # | Title |
|---|---|
| ch237 | Flip (Overview) |
| ch238 | Flip.batch() |
| ch239 | Flip.fit() |
| ch240 | Flip.from() |
| ch241 | Flip.getState() |
| ch242 | Flip.isFlipping() |
| ch243 | Flip.killFlipsOf() |
| ch244 | Flip.makeAbsolute() |
| ch245 | Flip.to() |
Plugin — GSDevTools
| # | Title |
|---|---|
| ch246 | GSDevTools (Overview) |
| ch247 | GSDevTools.create() |
Plugin — Inertia
Plugin — MorphSVG
Plugin — MotionPathPlugin
Plugin — MotionPathHelper
| # | Title |
|---|---|
| ch284 | MotionPathHelper.kill() |
| ch285 | MotionPathHelper.editPath() |
Plugin — Observer
| # | Title |
|---|---|
| ch286 | Observer (Overview) |
| ch287 | Observer.deltaX |
| ch288 | Observer.deltaY |
| ch289 | Observer.disable() |
| ch290 | Observer.enable() |
| ch291 | Observer.event |
| ch292 | Observer.isDragging |
| ch293 | Observer.isEnabled |
| ch294 | Observer.isPressed |
| ch295 | Observer.kill() |
| ch296 | Observer.startX |
| ch297 | Observer.startY |
| ch298 | Observer.create() |
| ch299 | Observer.getAll() |
| ch300 | Observer.getById() |
| ch301 | Observer.isTouch |
| ch302 | Observer.target |
| ch303 | Observer.vars |
| ch304 | Observer.velocityX |
| ch305 | Observer.velocityY |
| ch306 | Observer.x |
| ch307 | Observer.y |
Plugin — Physics2D
| # | Title |
|---|---|
| ch308 | Physics2DPlugin |
Plugin — PhysicsPropsPlugin
| # | Title |
|---|---|
| ch309 | PhysicsPropsPlugin |
Plugin — Pixi
| # | Title |
|---|---|
| ch310 | PixiPlugin |
| ch311 | PixiPlugin.registerPIXI() |
Plugin — ScrambleText
| # | Title |
|---|---|
| ch312 | ScrambleTextPlugin |
Plugin — ScrollSmoother
Plugin — ScrollTo
| # | Title |
|---|---|
| ch329 | ScrollToPlugin |
| ch330 | ScrollToPlugin.config |
Plugin — ScrollTrigger
Plugin — SplitText
| # | Title |
|---|---|
| ch377 | SplitText (Overview) |
| ch378 | SplitText.chars |
| ch379 | SplitText.isSplit |
| ch380 | SplitText.kill() |
| ch381 | SplitText.lines |
| ch382 | SplitText.masks |
| ch383 | SplitText.revert() |
| ch384 | SplitText.split() |
| ch385 | SplitText.create() |
| ch386 | SplitText.vars |
| ch387 | SplitText.words |
Plugin — TextPlugin
| # | Title |
|---|---|
| ch388 | TextPlugin |
Guides
| # | Title |
|---|---|
| ch389 | Updating to GSAP 3 |
| ch390 | Accessible Animation |
| ch391 | Handling Conflicting Tweens |
| ch392 | Avoiding FOUC |
| ch393 | JS Frameworks |
| ch394 | Getting Started |
| ch395 | Control and Callbacks |
| ch396 | Easing (Guide) |
| ch397 | Staggers (Guide) |
| ch398 | Timelines (Guide) |
| ch399 | immediateRender |
| ch400 | Keyframes |
| ch401 | Common GSAP Mistakes |
| ch402 | Plugins (Guide) |
| ch403 | The Position Parameter |
| ch404 | Moving Off the Private Repo |
| ch405 | React |
| ch406 | React — Advanced Techniques |
| ch407 | React — Useful Patterns |
| ch408 | ScrollTrigger Tips & Mistakes |
| ch409 | SVG |
| ch410 | Webflow |
| ch411 | WordPress |
Topic Index
- Accessibility → ch390
- CustomEase / custom easing → ch152, ch396
- Draggable → ch190–ch232
- Easing → ch150, ch396, ch024, ch027
- Flip (layout animation) → ch237–ch245, ch167
- Framework cleanup (React/Vue/Svelte) → ch009 (gsap.context), ch393, ch405–ch407
- Inertia / physics → ch248–ch262, ch308, ch309
- Keyframes → ch400
- Labels → ch039, ch061, ch403
- matchMedia / responsive → ch022, ch023
- Migration from GSAP 2 → ch389
- MorphSVG → ch263–ch269
- MotionPathPlugin → ch270–ch285
- Observer → ch286–ch307
- Performance (quickTo/quickSetter) → ch025, ch026
- Pin (ScrollTrigger) → ch343
- Position parameter → ch403
- Scrub vs toggleActions → ch331, ch343, ch396–ch398
- ScrollSmoother → ch313–ch328
- ScrollTrigger → ch331–ch376, ch408
- SplitText → ch377–ch387
- Stagger → ch397, ch135
- Timeline sequencing → ch037–ch096, ch398
- Utility methods (clamp, mapRange, wrap, snap...) → ch132–ch149
- Webflow / WordPress integration → ch410, ch411
Supporting Files
- glossary.md — key terms with definitions
- patterns.md — composition patterns and techniques
- cheatsheet.md — quick reference tables and decision guides
Scope & Limits
This skill covers the official GSAP v3 documentation (core API, Tween/Timeline instances, utility methods, easing, and every officially maintained plugin) as of the fetch date. GSAP became 100% free (MIT) in 2024 — no license-gated features remain, though CSSRulePlugin is marked deprecated by GreenSock in favor of native CSS custom properties. For implementation details specific to a codebase, combine with project-specific tools.