Chapter 2: The gsap Object

Core Idea

gsap is the single access point for creating and controlling Tweens and Timelines, the two core building blocks of every animation.

Key Concepts

• Tween: a high-performance property setter — feed it targets, a duration, and properties, and it computes the right value at each point in time.
• Timeline: a container that sequences multiple tweens/timelines with exact relative timing, avoiding manual delay math.
• Common tween creators: gsap.to(), gsap.from(), gsap.fromTo() for simple, non-sequenced animation.

Code Examples

// This is a Tween
gsap.to(".box", { rotation: 27, x: 100, duration: 1 });

// And this is a Timeline, containing three sequenced tweens
let tl = gsap.timeline();
tl.to("#green", { duration: 1, x: 786 })
  .to("#blue", { duration: 2, x: 786 })
  .to("#orange", { duration: 1, x: 786 });

• What it demonstrates: a standalone tween vs. a timeline chaining three tweens back-to-back with no manual delay.

Key Takeaways

1. For one-off, non-sequenced animation, gsap.to/from/fromTo() is all you need.
2. Once you need choreography across multiple elements, reach for gsap.timeline() instead of stacking delay values.
3. Install via npm install gsap and import { gsap } from "gsap", or use a <script> include.

Connects To

• Tween: full method reference in the Tween chapters.
• Timeline: full method reference in the Timeline chapters.
• gsap.to() / gsap.from() / gsap.fromTo() / gsap.timeline(): see their dedicated chapters.