Realistic UI Motion with Easing Curves
Easing curves control animation acceleration to make UI motion feel natural, not robotic. Use 'Ease Out' for elements entering the screen and 'Ease In' for those leaving. The footgun is overusing one curve; this makes motion feel unnaturally perfect.
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.
Interview question
Which scenario is best suited for applying an 'Ease Out' animation curve?
- a.A notification banner appearing quickly and then gently settling into place.Correct
- b.An object smoothly accelerating as it exits the viewport.
- c.A loading indicator that spins at a consistent pace.
- d.A button changing its background color without leaving the screen.
Why? this is the answer
The card states that 'Ease Out' should be used for elements entering the viewport, starting fast and slowing to a gentle stop, which perfectly matches a notification banner appearing. Option B describes 'Ease In', not 'Ease Out'.
Just read this? Test yourself on what you have been reading.
Read the original → help.figma.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on ui — each one lists the topics its interview covers.
See open roles