19 July 2026

Easing Curves: Why Animations Feel Cheap or Expensive

The short answer

Easing is the acceleration curve of an animation, and it is the main reason motion reads as cheap or expensive. Linear movement feels mechanical; timid default ease-in-out feels generic. Premium interfaces mostly use pronounced ease-out curves, like GSAP's power3.out or expo.out, with a fast start and a long gentle landing, so the UI feels responsive but settles softly. Reserve ease-in for exits, elastic and bounce for playful accents, and linear for scrubbed or looping motion only.

Two sites can run the identical animation, same element, same distance, same duration, and one feels like a template while the other feels crafted. The difference is almost always easing: how velocity is distributed across the animation.

The vocabulary that matters

Ease-out (power2.out, power3.out, expo.out): starts fast, decelerates into place. The default for anything entering or responding to the user.
Ease-in: starts slow, accelerates away. For exits, since things leaving should gather speed, not dawdle.
Ease-in-out: for elements moving between two on-screen positions.
Elastic and back: overshoot and settle. Personality in small doses, on small elements.
Linear (none): constant speed. Correct for marquees, spinners, and scrubbed animation, where the user's scroll supplies the velocity.

Why expensive sites lean on strong ease-outs

An expo.out curve covers most of its distance in the first quarter of its duration, then spends the rest landing. Perceptually, the interface responds instantly and finishes gracefully, so you can afford longer durations (0.8-1.2s) without anything feeling slow. Weak easing forces short, abrupt durations, which is exactly the cheap feeling. Take one animation and try it at power1.out, power3.out, and expo.out; the differences teach more than any chart. The motion design module in Premium Website Masterclass builds a reusable easing system for a whole site, and Scroll Animation Mastery covers where easing applies and where scrub makes it irrelevant. Whatever you pick, define two or three named eases for the whole site and reuse them everywhere; consistency of motion is itself a mark of an expensive site. Easing costs nothing in bytes or performance, which makes it the cheapest upgrade in all of web animation.