Chapter 33: gsap.to()

Core Idea

gsap.to() is the most common tween creator: define destination values and GSAP animates from the current state to them.

Key Concepts

• Returns: a Tween.
• Current state as start: no need to define starting values, GSAP reads them automatically.
• Universal targets: works on DOM elements, SVG, plain JS objects — any numeric, color, or complex string property.

Code Examples

gsap.to(".box", { rotation: 27, x: 100, duration: 1 });

let tween = gsap.to(".class", { rotation: 360, duration: 5, ease: "elastic" });

• What it demonstrates: a basic destination-only animation, and keeping a reference to the returned Tween for later control (pause/reverse/kill).

Key Takeaways

1. Default choice for simple, non-sequenced animation — reach for a Timeline only once you need coordination between multiple tweens.
2. GSAP is not limited to CSS/DOM — any object property can be a tween target.

Connects To

• gsap.from() / gsap.fromTo(): the other two core tween creators, differing only in which end(s) are explicit.
• gsap.timeline(): for sequencing multiple to() calls together.