Easing
Also called easing function, timing function, or animation curve
A curve that controls how an animation’s speed changes over time, so motion can start slow, land softly, or keep one steady pace.
import { useState } from 'react';
import { Switch } from '@base-ui/react/switch';
export function CloudSyncSetting() {
const [syncing, setSyncing] = useState(false);
return (
<div className='flex w-72 flex-col gap-2'>
<label className='flex items-center justify-between text-sm font-medium'>
Sync to cloud
<Switch.Root
checked={syncing}
onCheckedChange={setSyncing}
className='flex h-5 w-9 rounded-full bg-muted p-0.5 transition-colors duration-200 data-checked:bg-primary'
>
{/* Moving between two spots: slow at both ends (ease-in-out). */}
<Switch.Thumb className='size-4 rounded-full bg-background shadow-sm transition-transform duration-200 ease-[cubic-bezier(0.65,0,0.35,1)] data-checked:translate-x-4' />
</Switch.Root>
</label>
{syncing && (
// Entering: a fast start and a soft landing (ease-out).
<p className='flex items-center gap-2 text-sm text-muted-foreground transition-[opacity,translate] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] starting:-translate-y-1 starting:opacity-0'>
{/* Constant motion: the same speed all the way around (linear). */}
<span className='size-3.5 animate-spin rounded-full border-2 border-muted border-t-muted-foreground' />
Syncing 12 files…
</p>
)}
</div>
);
}Give the app a consistent easing system: use cubic-bezier(0.23, 1, 0.32, 1) for elements that enter or respond to clicks, cubic-bezier(0.65, 0, 0.35, 1) for elements moving between two spots on screen, and linear only for spinners and progress bars. Define the curves as CSS variables and keep UI transitions between 150 and 300ms.
Paste into Layerwise or any AI coding tool.
What is Easing?
Easing describes how an animation spreads its movement across its duration. Two animations can cover the same distance in the same time and still feel completely different: one launches quickly and glides to a stop, another creeps forward and then rushes. In CSS it is set with transition-timing-function or animation-timing-function; in libraries such as Motion it is the ease option.
Easing is drawn as a curve, with time running left to right and progress running bottom to top. A straight diagonal is linear. CSS also has the keywords ease (the default), ease-in, ease-out, and ease-in-out, and you can draw any curve of your own with cubic-bezier().
A good default for interface motion is ease-out: elements react right away and settle gently. Use ease-in-out for things that move from one spot to another on screen, and linear for constant motion like spinners and marquees. Spring animations are a related approach that computes the motion from physics instead of a fixed curve.
Often confused with
- Duration
- Duration sets how long an animation takes. Easing sets how the speed changes within that time.
Related terms
All termsEase-out
An easing curve that starts fast and slows down at the end, so motion feels quick and lands softly.
Ease-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.
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.