📘 So far, you learned:

• — Animate ➔
• — Animate ➔

But sometimes you don’t want GSAP to guess.

You want to say:

• ✅ Start here
• ✅ End here

That’s where comes in.

📖 What is .fromTo()?

lets you define both the starting and ending values manually.

This is super useful when:

• You need exact control
• You're chaining multiple animations
• You don't want GSAP to "guess" starting or ending values

Example: .fromTo() in Action

gsap.fromTo(
  ".box",
  {
    opacity: 0, // Start invisible
    y: 100, // Start 100px lower
  },
  {
    opacity: 1, // End fully visible
    y: 0, // End at normal position
    duration: 1,
  }
);

✅ The box fades in while moving from 100px below back to its normal position.

export default function App() {
  return <h1>Hello world</h1>
}

👉 What happens here?

The box starts invisible and shifted down.

It animates to fully visible and back to normal position.

Clean. Predictable. Controlled.

📚 .fromTo() Syntax Overview

gsap.fromTo(targets, fromVars, toVars);

✅ Tip:

• Only put animatable properties inside fromVars
• Put animation settings (like duration, ease, delay) inside toVars

🧪 Quick Practice Challenge

👉 Animate a .box to scale up and fade in using :

export default function App() {
  return <h1>Hello world</h1>
}

Hint

Code:

gsap.fromTo(
  ".box",
  { opacity: 0, scale: 0 }, // Start tiny and invisible
  { opacity: 1, scale: 1, duration: 1 } // Grow and appear
);

✅ Why Use .fromTo()?

🔥 Coming Up Next...

You’ve now learned the three core tween types: , , and .

You're ready for the next big skill:

✨ Stagger animations — animate multiple elements with beautiful delays between them!

Let’s animate armies of elements together in the next lesson! 🚀