Chapter 97: Tween (Overview)

Core Idea

A Tween is the actual worker that animates properties: it takes targets, a duration, and properties to change, and computes the right value at each point on its playhead.

Key Concepts

• Created by: gsap.to(), gsap.from(), gsap.fromTo() (all return a Tween).
• Shared API with Timeline: Tween and Timeline both extend a common animation base, so most control methods (play, pause, progress, time, timeScale, repeat, kill, etc.) behave the same way on either — this section documents Tween-specific behavior; see the Timeline chapters for the shared mechanics in more depth.

Code Examples

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

Connects To

• Timeline chapters: full documentation of the many methods Tween shares with Timeline.
• gsap.to() / gsap.from() / gsap.fromTo(): the tween-creating methods.