In GSAP, one of the most fundamental and powerful methods you'll use is .to(). Think of it as telling your element: “Hey, go from where you are right now… to this new state.” With .to(), you're defining what the end result should look like.

And GSAP takes care of animating from the element’s current position or style to the new values you provide. For example, if you want a box to move to the right and fade out, you’d use .to() to animate its x position and reduce its opacity.

Here’s a simple example:

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

It's like giving GSAP a destination, and it figures out the smoothest way to get there. Whether it's changing position, scale, rotation, color, or any other animatable CSS/JS property, .to() is your go-to method. And since it starts from the element’s current state, it makes chaining and sequencing super flexible - no need to manually reset or define where the element begins. You just say where you want it to go, and GSAP takes the wheel.

• — tells GSAP: "Hey, animate something."
• — is our . (CSS selector for an element with the class )
• — the we want to animate. ( moves the element horizontally)
• — how long the animation takes (in ).

And just like that... your box moves, right ?

💡 Think of like giving your element a destination address. You’re saying, "Go there, and here’s how long you have to get there."

Why .to() Is So Powerful

• You don’t need to know where your element starts — GSAP figures it out automatically!
• You can animate multiple properties at once (like x, y, opacity, scale...).
• You can chain animations together for complex motion!

We’ll explore all of these superpowers very soon. 🦸‍♂️

Quick Practice Challenge

👉 Try animating your not just to the right, but also make it fade out (opacity: 0) at the same time!

Hint

Code

gsap.to(".box", {
  x: 200,
  opacity: 0,
  duration: 1
});

Your box will move right and vanish! Magic. ✨

🚀 .to() Superpowers (Advanced Options)

So far, we animated just x and opacity.

But can handle so much more — and it's not just about CSS!

Here’s a sneak peek at what you can animate with :

This is from the gsap cheatsheet cheatsheet

gsap.to(".selector", {
  x: 100, // Move horizontally
  backgroundColor: "red", // Change color (camelCase!)
  duration: 1, // How long the animation takes (seconds)
  delay: 0.5, // Start after 0.5 seconds
  ease: "power2.inOut", // Control the speed curve
  stagger: 0.1, // Animate multiple elements with a delay between them
  paused: true, // Start paused (you can play later!)
  overwrite: "auto", // Manage conflicting animations
  repeat: 2, // Repeat the animation 2 times (-1 = infinite)
  repeatDelay: 1, // Wait 1 second between repeats
  repeatRefresh: true, // Refresh values on each repeat
  yoyo: true, // Reverse the animation (A-B-B-A)
  yoyoEase: true, // Different ease when reversing
  immediateRender: false, // Control when the animation starts calculating
  onComplete: () => {
    console.log("finished!");
  },
  // Other callbacks: onStart, onUpdate, onRepeat, onReverseComplete
});

🧠 Some Key Notes

• — you can animate any numeric or color property!
• — when animating things like , use camelCase (not CSS hyphens).
• — you can hook into events like when animation , , or .

🎯 Lesson Conclusion: .to()

In this lesson, you learned how gsap.to() lets you animate elements from their current state to a new one — whether it's moving, fading, scaling, or rotating.

With just a few lines of code, you can already make your UI feel smoother and more dynamic.

Next up, we’ll explore the opposite side:

What if you want to animate something starting from a specific state instead?

That’s where comes in. Get ready to flip the animation flow — starting from your custom starting point!