Learn the vocabulary.
Definitions and examples for the GSAP and animation concepts behind production motion. Every concept has a figure that shows it moving: hover one to play it, open it for the code and the Annnimate components that use it.
Learn these six first.
- 01gsap.to / gsap.from / gsap.fromTogsap.to, gsap.from, and gsap.fromTo are GSAP's three ways to create a tween, and they differ only in which end of the animation you describe.
- 02expo.outexpo.out is a GSAP easing function that starts an animation fast and decelerates exponentially to its final value.
- 03staggerStagger is a GSAP property that offsets the start time of each target in a tween, animating them one after another instead of all at once.
- 04gsap.timeline()gsap.timeline() creates a sequenced container for multiple tweens.
- 05ScrollTriggerScrollTrigger is a GSAP plugin that ties any animation to scroll position.
- 06useGSAPuseGSAP is the official React hook from @gsap/react that scopes GSAP animations to a component and cleans them up automatically on unmount.
Core
The GSAP fundamentals: tweens, gsap.to / from / fromTo, gsap.set, the vars object, callbacks, and gsap.utils.
- CallbacksCallbacks are functions GSAP runs at fixed points in a tween or timeline's lifecycle: onStart when it begins, onUpdate on every frame it advances, onComplete when it finishes, and onReverseComplete when it finishes playing back to the start.
- gsap.delayedCall()gsap.delayedCall is a GSAP core method that runs a function once after a set number of seconds, like setTimeout, but on GSAP's own clock instead of the browser's.
- gsap.getProperty()gsap.getProperty is a GSAP core method that reads an element's current value for a given property, returning a real number instead of a CSS string so you can do math with it directly.
- gsap.registerEffect()gsap.registerEffect is a GSAP core method that packages an animation into a named, reusable recipe you call as gsap.effects.name(targets, config).
- gsap.set()gsap.set() is the GSAP method that applies properties to elements instantly, with no animation.
- gsap.tickergsap.ticker is GSAP's central requestAnimationFrame loop, the single heartbeat that drives every tween, timeline, and ScrollTrigger update on the page.
- gsap.to / gsap.from / gsap.fromTogsap.to, gsap.from, and gsap.fromTo are GSAP's three ways to create a tween, and they differ only in which end of the animation you describe.
- gsap.utilsgsap.utils is a set of helper functions built into GSAP core for the math that drives animation: clamp, mapRange, random, snap, interpolate, wrap, and toArray, among others.
- immediateRenderimmediateRender is a GSAP tween setting that controls whether a from or fromTo tween writes its starting values the moment the tween is created, or waits until playback begins.
- snapsnap is a GSAP helper that rounds a value to the nearest step in an increment or the nearest entry in an array of allowed values.
Easing
Every GSAP ease explained: expo, power, back, elastic, sine, steps and CustomEase, and when each one fits real UI.
- back.outback.out is a GSAP ease that overshoots its destination, then settles back.
- circcirc is a GSAP easing family (circ.in, circ.out, circ.inOut) whose curve traces a quarter circle, so the motion is nearly flat through the middle and bends hard at one or both ends.
- CustomBounceCustomBounce is a GSAP easing plugin that builds a tunable bounce curve you shape yourself, instead of the one fixed shape you get from the built-in bounce.out.
- CustomEaseCustomEase is a GSAP plugin that lets you author any easing curve you want, defined either by an SVG path string or by control points.
- CustomWiggleCustomWiggle is a GSAP easing plugin that makes a value oscillate back and forth a set number of times before settling on its end value.
- ease-in-outease-in-out is the family of GSAP eases that accelerate from rest, cruise through the middle, and decelerate to rest.
- easeReverseeaseReverse is a GSAP tween property, added in 3.15, that sets a separate ease for when the playhead moves backward.
- elastic.out and bounce.outelastic.out and bounce.out are GSAP overshoot eases that let an element pass its target value and settle back, instead of decelerating cleanly into it.
- expo.outexpo.out is a GSAP easing function that starts an animation fast and decelerates exponentially to its final value.
- power4.outpower4.out is GSAP's most aggressive standard ease-out, decelerating from very high initial velocity to a near-instant stop at the end.
- roughrough is a GSAP ease from the EasePack plugin that jitters an animation's progress through randomized in-between points instead of moving it smoothly, so a value arrives with a shaky, hand-drawn or glitchy feel.
- sinesine is the gentlest of GSAP's standard easing families, built on a segment of a sine wave so its acceleration and deceleration are only slightly stronger than linear.
- slowslow is a GSAP ease from EasePack that runs fast at the start and end of a tween and slows down through the middle, so the value lingers where the eye can actually read it.
- steps()steps() is a GSAP ease that quantizes a tween's progress into a fixed number of discrete jumps instead of interpolating smoothly, so the animated value snaps between set positions.
Scroll
ScrollTrigger and the patterns that turn page scroll into animation timing.
- Horizontal scrollHorizontal scroll is a scroll-driven layout where a full-viewport section is pinned in place and its inner track slides sideways as the user scrolls vertically.
- invalidateOnRefreshinvalidateOnRefresh is a ScrollTrigger option that tells GSAP to re-read each tween's starting values on every ScrollTrigger.refresh().
- PinningPinning is a ScrollTrigger feature that locks an element in place while scroll progresses past it.
- Scroll snappingScroll snapping is a ScrollTrigger feature that eases the scroll position to the nearest defined stop after the user stops scrolling.
- Scroll velocityScroll velocity is the speed and direction the user is scrolling, measured in pixels per second, which ScrollTrigger exposes through self.getVelocity() inside its callbacks.
- ScrollSmootherScrollSmoother is a GSAP plugin that wraps native scrolling in a smoothing layer, so the page eases toward the scroll position instead of snapping to it.
- ScrollToPluginScrollToPlugin is a GSAP plugin that animates scroll position, so you can smooth-scroll the window or any scrollable element to a pixel value or a target element with an ease and duration you control.
- ScrollTriggerScrollTrigger is a GSAP plugin that ties any animation to scroll position.
- ScrollTrigger.batch()ScrollTrigger.batch() is a static method that creates one ScrollTrigger per element but groups the ones entering the viewport in the same frame into a single callback, so you can stagger a whole batch at once instead of animating each element on its own trigger.
- ScrubScrub is the ScrollTrigger option that binds a tween's progress to scroll position instead of time.
- toggleActionstoggleActions is a ScrollTrigger string that controls what a linked animation does at four scroll moments: onEnter, onLeave, onEnterBack, onLeaveBack.
Timeline
Sequencing tweens together with the GSAP timeline API - the heart of every multi-step animation.
- gsap.timeline()gsap.timeline() creates a sequenced container for multiple tweens.
- keyframeskeyframes is a GSAP tween property that runs several sequential steps inside a single tween, so you can choreograph multi-stage motion without building a full timeline.
- Nested timelinesNested timelines are GSAP timelines added inside another timeline as a single, self-contained unit, so a whole sub-sequence can be positioned, delayed, sped up, or reversed as one object.
- Position parameterThe position parameter is the second-to-last argument on any timeline .to() / .from() / .set() call.
- repeat & repeatDelayrepeat and repeatDelay are GSAP special properties that loop a tween or timeline a set number of times, with an optional gap between each pass.
- Seamless loopA seamless loop is a GSAP animation set to repeat: -1 whose end state matches its start state exactly, so it plays forever with no visible jump at the loop point.
- staggerStagger is a GSAP property that offsets the start time of each target in a tween, animating them one after another instead of all at once.
- Timeline controlsTimeline controls are the methods GSAP exposes on a timeline instance to drive its playhead after it's built: play(), pause(), reverse(), restart(), seek(), progress(), time(), and timeScale().
- Timeline labelsTimeline labels are named time positions you attach to a GSAP timeline with addLabel(), then reference by name to place tweens, seek the playhead, or start playback.
- timeScaletimeScale is a GSAP method that changes the playback rate of a tween or timeline while it is running: timeScale(2) plays it at double speed, timeScale(0.5) at half speed, and timeScale(1) is normal.
- yoyoyoyo is a GSAP repeat modifier that makes each odd repeat play in reverse.
Text
SplitText and the patterns that animate characters, words, and lines independently.
- ScrambleTextScrambleText is a GSAP plugin that animates an element's text by cycling each character through random symbols before it locks onto the final string.
- Split-text revealSplit-text reveal is a text-animation pattern that breaks a headline or paragraph into characters, words, or lines with GSAP SplitText, then staggers each unit into view so the text assembles itself instead of just appearing.
- SplitTextSplitText is a GSAP plugin that breaks a block of text into per-character, per-word, or per-line wrappers so each unit can be animated independently.
- TextPluginTextPlugin is a GSAP plugin that animates the text content of an element from its current string to a new one, swapping characters in across the tween's duration.
SVG
Animating SVG with GSAP: drawing strokes with DrawSVG, shape morphing with MorphSVG, and motion along a path.
React
Using GSAP inside React safely - the useGSAP hook, cleanup, and context.
- gsap.context()gsap.context() is a GSAP method that collects every animation, timeline, and ScrollTrigger created inside a function so one revert() call cleans them all up at once.
- useGSAPuseGSAP is the official React hook from @gsap/react that scopes GSAP animations to a component and cleans them up automatically on unmount.
Frameworks
Integrating GSAP with Vue and with server-rendered apps (Next.js SSR / hydration).
- GSAP in VueGSAP in Vue is the pattern for driving GSAP animations from a Vue 3 component: you create your tweens inside onMounted once the DOM exists, scope them to the component with a template ref, and kill them in onUnmounted.
- GSAP with SSRSSR-safe GSAP is the set of patterns that let GSAP run inside a server-rendered React app like Next.js without crashing the build or flashing on hydration.
Performance
What to animate and what to avoid so the browser stays at 60fps.
- autoAlphaautoAlpha is a GSAP shorthand that tweens opacity and visibility together.
- force3Dforce3D is the GSAP property that forces an animated element onto its own GPU layer by applying a 3D transform matrix even when the animation is 2D-only.
- overwriteoverwrite is a GSAP tween property that decides what happens when a new tween targets a property another tween is already animating.
- will-changewill-change is a CSS property that hints to the browser which properties are about to animate, letting it pre-promote the element to its own GPU layer.
Plugins
Specific GSAP plugin APIs: matchMedia, quickTo, and friends.
- DraggableDraggable is a GSAP plugin that makes any element draggable, spinnable, or throwable with mouse and touch input.
- FlipFlip is a GSAP plugin that animates a layout change by recording an element's position and size, letting the DOM change, then tweening from the old state to the new one with transforms.
- gsap.matchMedia()gsap.matchMedia() is the GSAP API for running different animation code at different breakpoints, and for cleanly disposing of breakpoint-specific animations when the media query stops matching.
- gsap.quickTo()gsap.quickTo() is GSAP's high-frequency-event optimizer.
- InertiaPluginInertiaPlugin is a GSAP plugin that reads the velocity of a property and, when you let go, glides it to a natural stop based on how fast it was moving.
- MotionPathPluginMotionPathPlugin is a GSAP plugin that animates an element along an SVG path or a set of x/y points.
- ObserverObserver is a GSAP plugin that normalizes wheel, touch, and pointer input into one set of direction and velocity callbacks, so you can react to a gesture without binding it to scroll position the way ScrollTrigger does.