Motion Easing

Motion easing determines exactly how an interface element accelerates and decelerates as it moves. It turns raw duration into motion that feels intentional instead of robotic. The physical world never moves at one constant speed. A cabinet drawer starts slow then speeds up before slowing to a stop. Interfaces borrow this behavior through curves. The three curves that solve every common product need are ease out for elements entering the screen, ease in for elements leaving the screen, and ease in out for elements moving within the current view. Translate these into code with cubic bezier values. Enter gets cubic-bezier(0, 0, 0.2, 1) so new content feels like it settles into place. Exit gets cubic-bezier(0.4, 0, 1, 1) so departing content acknowledges the user before it disappears. Standard gets cubic-bezier(0.4, 0, 0.2, 1) so internal movements feel balanced. These specific curves come from real user testing not designer preference. They carry the emotion of the product without ever calling attention to themselves.

Motion easing is not decoration added at the end of the project. It is not linear movement that makes every transition feel like a spreadsheet update. It is not spring physics copied from a popular Framer template and applied indiscriminately. It is not a unique curve invented for each new screen by whichever designer is on rotation. Teams that treat easing this way ship products where nothing feels connected. The dropdown uses one curve. The modal uses another. The button press uses a third. Users sense the lack of craft even if they never open the dev tools to inspect the bezier values. Easing belongs in the token layer of the design system right next to border radius and font weights. Treat it as anything less and your motion will drift within two sprints.

Superhuman rebuilt their email client motion system in 2024 with a concrete example that still holds up. New emails ease in from above using the enter curve over 200 milliseconds. Existing rows shift downward with the standard curve. The stagger between items sits at 30 milliseconds but never exceeds four items. The inbox feels alive. The eye travels exactly where it should without distraction. Every animation pulls from the same five motion tokens. When Superhuman shipped their calendar integration six months later the new animations matched the existing ones perfectly on day one. No meetings required. The tokens enforced consistency. Users process 27 percent more messages per session because the motion supports the workflow instead of fighting it.

Momentum took the opposite approach in 2023 and paid for it. Their dashboard widgets all loaded with custom spring easings tuned differently by each designer. Cards bounced and overshot based on personal taste rather than any system. The marketing site looked energetic. Daily use felt chaotic and nauseating. Testing revealed 40 percent of users reported fatigue after 30 minutes. The company removed every spring in favor of the three core curves tied to strict durations. Average session length increased 35 percent within one release cycle. The change proved that easing is about usability at volume not about looking dynamic in a screenshot.

Reach for motion easing on every state change that needs to be understood instantly and every transition that must guide attention. Apply ease out to toasts, tooltips, dropdowns and any fresh content so the user registers arrival without jarring impact. Use ease in for anything that dismisses so the exit registers before the element vanishes. Choose ease in out for layout shifts, card expansions, and list reorders so the movement feels connected to the spatial model of the product. Always pair the curve with its matching duration from the table. Button hovers get 120 milliseconds. Modal opens get 280 milliseconds. Page transitions get 380 milliseconds. Lock these decisions into tokens named motion.ease.enter, motion.ease.exit and motion.ease.standard. Enforce the tokens in code review. This approach scales when AI interfaces introduce streaming content and live updates that require subtle motion layered on top of existing flows.

Drop motion easing the moment a user enables prefers reduced motion. Swap every position change for an opacity transition using identical timing. The communication survives. The vestibular trigger disappears. Never deploy spring easing in products that handle money, health data or enterprise workflows. The overshoot that delights in a game feels like error in a spreadsheet. One fintech company discovered this in 2025 when their spring loaded transaction screen caused users to double check every balance because the animation suggested instability. Reserve springs for consumer social apps where the brand voice supports playfulness. Cut any animation that exceeds 500 milliseconds for repeat users. The cinematic feel on first use becomes a tax on the hundredth use. Never create one off curves for special features. That decision fragments the system and forces every future designer to guess what the product is supposed to feel like.

Motion easing done right makes the interface disappear so the user can focus on their actual work.