Concepts

Learn the vocabulary.

Definitions and examples for the GSAP and animation concepts behind production motion. Each entry leads with a one-sentence definition, then shows how it works in code and which Annnimate components use it.

Start here

Feel the fundamentals.

Interactiveexpo.outexpo.out is a GSAP easing function that starts an animation fast and decelerates exponentially to its final value.InteractivestaggerStagger 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.Interactiveback.outback.out is a GSAP ease that overshoots its destination, then settles back.
10 entries

Core

The GSAP fundamentals: tweens, gsap.to / from / fromTo, gsap.set, the vars object, callbacks, and gsap.utils.

14 entries

Easing

How animation interpolates between values - the shape of the curve from start to finish.

11 entries

Scroll

ScrollTrigger and the patterns that turn page scroll into animation timing.

11 entries

Timeline

Sequencing tweens together with the GSAP timeline API - the heart of every multi-step animation.

4 entries

Text

SplitText and the patterns that animate characters, words, and lines independently.

2 entries

SVG

Animating SVG with GSAP: drawing strokes with DrawSVG, shape morphing with MorphSVG, and motion along a path.

2 entries

React

Using GSAP inside React safely - the useGSAP hook, cleanup, and context.

2 entries

Frameworks

Integrating GSAP with Vue and with server-rendered apps (Next.js SSR / hydration).

4 entries

Performance

What to animate and what to avoid so the browser stays at 60fps.

7 entries

Plugins

Specific GSAP plugin APIs: matchMedia, quickTo, and friends.