Asymmetric easing
Also called asymmetric curve
An easing curve whose start and end are shaped differently, such as a quick start with a long, gentle landing.
import { Dialog } from '@base-ui/react/dialog';
const links = ['Projects', 'Templates', 'Billing', 'Settings'];
export function NavigationDrawer() {
return (
<Dialog.Root>
<Dialog.Trigger className='rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted'>
Menu
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Backdrop className='fixed inset-0 bg-black/30 transition-opacity duration-350 ease-[cubic-bezier(0.4,0,0.2,1)] data-ending-style:opacity-0 data-starting-style:opacity-0' />
{/* cubic-bezier(0.4, 0, 0.2, 1): a quick start and a long, soft landing.
It covers half the distance in about a third of the time. */}
<Dialog.Popup className='fixed inset-y-0 right-0 flex w-72 flex-col gap-1 border-l bg-background p-4 shadow-xl outline-none transition-[translate] duration-350 ease-[cubic-bezier(0.4,0,0.2,1)] motion-safe:data-ending-style:translate-x-full motion-safe:data-starting-style:translate-x-full'>
<Dialog.Title className='px-3 pb-2 text-sm font-semibold text-muted-foreground'>
Menu
</Dialog.Title>
<nav className='flex flex-col'>
{links.map((link) => (
<a
key={link}
href={`/${link.toLowerCase()}`}
className='rounded-md px-3 py-2 text-sm font-medium hover:bg-muted'
>
{link}
</a>
))}
</nav>
</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
);
}Animate the side drawer so it slides in from the right over 350ms with an asymmetric curve, cubic-bezier(0.4, 0, 0.2, 1), for a quick start and a long, soft landing. Fade the backdrop with the same curve, and skip the slide when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Asymmetric easing?
A symmetric curve like ease-in-out accelerates and decelerates the same way, so the element reaches the halfway point exactly halfway through the animation. An asymmetric curve gives the two ends different shapes. The most useful version starts briskly and spends longer settling, so motion responds quickly and still lands softly.
Material Design’s standard curve, cubic-bezier(0.4, 0, 0.2, 1), is a well-known example: it covers half the distance in about a third of the time. Use this kind of curve for elements moving across the screen, such as a drawer, a carousel slide, or a card expanding into a page.
The reverse, a long slow start with a quick stop, tends to feel heavy and late. When you tune a curve, adjust the ends separately: the first pair of numbers in cubic-bezier() shapes the start, and the second pair shapes the landing.
Often confused with
- Ease-in-out
- Ease-in-out is the symmetric version: its start and end mirror each other, so it reaches halfway at exactly half time.
Related terms
All termsEase-in-out
An easing curve that starts slowly, speeds up in the middle, and slows down again at the end, tracing an S shape on a graph.
Cubic-bezier
A CSS function that defines a custom easing curve with four numbers: the positions of two control points that bend the curve.
Ease-out
An easing curve that starts fast and slows down at the end, so motion feels quick and lands softly.
Drawer
A panel that slides in from the edge of the screen, usually the bottom on phones or the side on desktop, to show extra content or options.
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.