Chapter 1: GSAP Overview (Animate Anything)

Core Idea

GSAP's core handles tweening and sequencing for any browser-safe property (CSS, SVG attributes, canvas objects, plain JS object properties); extra capabilities like dragging, scroll-driven animation, and shape morphing live in separate plugins so the core stays small.

Key Concepts

• Tween: a single animation of one or more properties over time, created with gsap.to(), gsap.from(), gsap.fromTo(), or gsap.set().
• Timeline: a container that sequences multiple tweens with precise relative timing.
• Ease: the rate-of-change curve applied to a tween (power1-power4, back, bounce, elastic, expo, sine, circ, steps(n), or "none").
• Utility Methods: standalone helpers (gsap.utils.*) for math/data tasks like clamping, mapping ranges, or snapping values, independent of animation.
• Plugins: opt-in modules (Draggable, ScrollTrigger, MorphSVG, Flip, SplitText, etc.) that extend what can be animated or how.

Key Takeaways

1. Everything animatable with plain properties (CSS, attributes, numeric values, colors, complex strings) is covered by the core, no plugin required.
2. Plugins are additive: register only what you need (gsap.registerPlugin(...)) to keep bundle size down.
3. Cleanup and responsive behavior are first-class: context()/revert() for teardown, matchMedia() for breakpoint-based animation.

Connects To

• GSAP Core methods: gsap.to(), gsap.from(), gsap.timeline() and the rest of the static API.
• Eases: full list and usage in the Eases chapters.
• Plugins: each plugin (Draggable, ScrollTrigger, Flip, MorphSVGPlugin, SplitText, etc.) has its own chapter group.