Realistic UI Motion with Easing Curves

WHY IT EXISTS Objects in the real world don't start and stop moving instantly or travel at a constant speed. Linear, robotic motion in a UI feels unnatural and cheap. Easing was created to mimic physical acceleration and deceleration, making digital interactions feel more grounded, responsive, and intuitive.

THE MENTAL MODEL Think of easing as the 'feel' of a car's movement. A linear animation is like a car instantly hitting 60 mph and instantly stopping—jarring and unrealistic. An 'Ease Out' animation is like flooring the gas pedal and then gently braking to a stop at your destination. An 'Ease In' is like slowly rolling out of a parking spot and then accelerating onto the highway.

HOW IT WORKS Easing is a function that dictates an animation's speed over its duration. In Figma, this is represented by a Bezier curve on a graph where the horizontal x-axis is time and the vertical y-axis is the animation's progress. A straight diagonal line is 'Linear' (constant speed). A curve that is steep at the start and flat at the end is 'Ease Out.' A curve that overshoots its endpoint and comes back, like 'Ease Out Back,' mimics a springy bounce.

WHEN TO USE IT Use easing to guide the user's eye and communicate purpose. Use 'Ease Out' for elements entering the viewport; the initial speed grabs attention and the slow finish allows the user to process it. Use 'Ease In' for elements leaving the viewport, as they gracefully accelerate out of sight. Use 'Ease In and Out' for state changes on a single object that remains on screen, like a button changing color.

WHEN NOT TO USE IT Avoid 'Linear' easing for most UI transitions, as it looks robotic. The main exception is for animations that should feel constant, like a spinning loading indicator. Be careful not to overuse 'Ease In Back' or 'Ease Out Back'; the bounce effect is strong and can feel overly playful or distracting in a serious application.

ONE CANONICAL EXAMPLE A notification banner slides in from the top of the screen. Using an 'Ease Out' curve makes it appear quickly but slow to a gentle stop, giving the user time to read it without it feeling abrupt. When dismissed, it can use an 'Ease In' curve to accelerate away and off the screen, feeling responsive but not distracting.