Ease-out
Also called ease out or deceleration curve
An easing curve that starts fast and slows down at the end, so motion feels quick and lands softly.
import { Menu } from '@base-ui/react/menu';
export function ShareMenu() {
return (
<Menu.Root>
<Menu.Trigger className='rounded-full border px-4 py-2 text-sm font-medium hover:bg-muted'>
Share
</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={8}>
{/* A strong ease-out: a fast start that settles softly. */}
<Menu.Popup className='min-w-40 origin-(--transform-origin) rounded-xl border bg-background p-1 shadow-lg outline-none transition-[opacity,translate,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] data-ending-style:-translate-y-2 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:-translate-y-2 data-starting-style:scale-95 data-starting-style:opacity-0'>
{['Copy link', 'Email', 'Embed'].map((label) => (
<Menu.Item
key={label}
className='rounded-lg px-3 py-2 text-sm outline-none data-highlighted:bg-muted'
>
{label}
</Menu.Item>
))}
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
);
}Animate the dropdown menu so it fades in and slides down 8px over 200ms with a strong ease-out curve, cubic-bezier(0.23, 1, 0.32, 1). Use the same curve when it closes.
Paste into Layerwise or any AI coding tool.
What is Ease-out?
Ease-out front-loads the movement: most of the distance happens in the first part of the animation, then the element glides into place. Because things respond the instant you act, ease-out makes an interface feel fast and responsive.
Use it for anything entering the screen or reacting to the user: menus opening, modals appearing, toasts sliding in, buttons responding to a press. It is the safest default for UI motion.
The built-in CSS ease-out keyword is fairly gentle. Many polished interfaces use a stronger custom curve such as cubic-bezier(0.23, 1, 0.32, 1), which feels snappier at the start and calmer at the end.
Often confused with
- Ease-in
- Ease-in starts slow and ends fast, which makes UI feel sluggish. Ease-out is its mirror image.
- Ease-in-out
- Ease-in-out is slow at both ends. It suits elements moving from one spot to another while already on screen.
Related terms
All termsEasing
A curve that controls how an animation’s speed changes over time, so motion can start slow, land softly, or keep one steady pace.
Cubic-bezier
A CSS function that defines a custom easing curve with four numbers: the positions of two control points that bend the curve.
Duration
The length of time an animation takes from start to finish, usually set in milliseconds. It decides whether motion feels snappy or sluggish.
Spring animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.