Types of Tween Methods

GSAP provides three primary methods for creating tweens. All of them return a tween instance and can animate almost any numeric property.

1. gsap.to()

Definition:
Animates to the given final property values. This means GSAP reads the element’s current properties and animates toward the values you specify.

When to use:

• When you want to animate from whatever the element currently is.

• Ideal for dynamic animations.

Behavior:

• Starts at current state → moves to your defined values.

Use Cases:

• Move an element to a new position

• Fade in/out

• Scale up/down

2. gsap.from()

Definition:
Animates from the property values you define to whatever the element is currently at. Think of it like starting from a different state and settling into natural/default position.

When to use:

• For intro animations (elements sliding in, appearing)

• For revealing UI elements.

Behavior:

• Starts at the values you provide → animates to the element’s actual current style.

Use Cases:

• Animating elements onto the screen from offscreen positions

• Fade in from opacity 0

• Scale reveal animation

3. gsap.fromTo()

Definition:
Allows you to specify both a starting and ending set of property values.

When to use:

• When the current state of the element can vary

• When you want strict control over both animation endpoints

Behavior:

• Explicit start values → explicit end values

Use Cases:

• Reusable tweens

• Resettable intro sequences

• Precise motion design

  
  

In GSAP, the to(), from(), and fromTo() methods define how animations start and end. The to() method animates properties from their current values to the specified ones, making it ideal for forward animations. The from() method does the opposite — it animates elements from given starting values to their current state, useful for entrance effects like fades or slides. The fromTo() method offers full control by explicitly defining both the start and end values, ensuring consistent results regardless of an element’s initial state. Together, these three methods form the foundation for creating dynamic and flexible GSAP animations.