Chapter 15: gsap.fromTo()

Core Idea

gsap.fromTo() lets you set both the starting and ending values explicitly, giving full control instead of inferring one end from the current state.

Key Concepts

• Two vars objects: first argument after targets is the starting values, second is the ending values (plus special properties like duration).
• Returns: a Tween.

Code Examples

gsap.fromTo(".box", { opacity: 0 }, { opacity: 0.5, duration: 1 });

• What it demonstrates: animating opacity from an explicit 0 to an explicit 0.5, independent of whatever the element's current opacity happens to be.

Key Takeaways

1. Best choice when chaining/timing matters and you can't rely on "current state" as an implicit start or end (e.g. inside a timeline where a prior tween already changed the value).
2. Any property animatable with to()/from() works the same way here.

Connects To

• gsap.to() / gsap.from(): simpler one-sided versions of the same concept.