Imagine you're driving a car. You don't instantly hit top speed. First you gently accelerate, gradually gaining momentum. As you approach a red light, you don't abruptly stop, you ease off the gas, smoothly slowing down until you come to rest.

Now picture the opposite: slamming the accelerator instantly and then suddenly jerking to a halt. Unnatural and uncomfortable, right?

That's exactly how animations feel without easing.

When you animate something, you're not just saying, “Move from A to B.” You’re also deciding how it moves. Should it start slow and then zip out? Should it bounce back? Should it ease into place like it’s guided by gravity?

That’s where easing functions come in.

What is Easing?

At its core, easing is a mathematical function that defines how fast or slow something moves during the animation.

• Does it accelerate?
• Does it decelerate?
• Does it bounce or overshoot before settling?

Without easing, your animation has a constant speed — it feels like a robot dragging a UI across the screen.

With easing, you add emotion, rhythm, personality. Easing shapes time.

One of the most common misunderstandings in animation is thinking that easing controls speed. It doesn’t.

Easing ≠ Speed

What it actually controls is how that speed changes over time.

But how does this work in GSAP?

Behind the Scenes

At its core, as learned, easing doesn’t change how long an animation lasts; it changes how progress is distributed across that time.

Let’s understand that by comparing linear motion with eased motion.

1. Linear Motion

   gsap.to(".box", {
     x: 300,
     duration: 1,
     ease: "none"
   });

   In this example, box moves from x: 0 to over . Every frame progresses at .