KO

Page 2: Core Methods: .to(), .from(), .fromTo()

2. Core Methods: .to(), .from(), .fromTo()

Understanding the three main Tween methods in GSAP is the foundation of all animations. They control the start point, end point, or both.

2.1. gsap.to() (Current State → Final State)

This is the most common method, animating the element from its current state to the specified final state.

gsap.to(".item-a", { duration: 1, y: 50, opacity: 0.5 });
// Animates item-a from its current position 50px down on the Y-axis and sets opacity to 0.5.

2.2. gsap.from() (Initial State → Current State)

You specify the initial state based on the element's final (current) state, and it animates from there to the current state. Useful for load-in animations.

gsap.from(".item-b", { duration: 1.5, scale: 0, rotation: 360 });
// Animates item-b from a state of scale 0 and 360-degree rotation to its final (current) state.

2.3. gsap.fromTo() (Initial State → Final State)

Explicitly controls both the start and end points, preventing the animation from changing the element's original CSS state before it begins.

gsap.fromTo(".item-c", 
  { x: -100 }, // From (Initial State)
  { duration: 1, x: 100 } // To (Final State)
);
// Moves item-c from X-axis -100px to X-axis 100px.
Contact Us