Ease-in-out
Also called ease in out or S-curve easing
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.
import { Tabs } from '@base-ui/react/tabs';
const tabs = [
{
value: 'overview',
label: 'Overview',
text: '12 pages, published 2 hours ago.'
},
{
value: 'activity',
label: 'Activity',
text: 'Maya edited the pricing page.'
},
{
value: 'settings',
label: 'Settings',
text: 'Custom domain: launch.example.com'
}
];
export function ProjectTabs() {
return (
<Tabs.Root defaultValue='overview' className='w-80'>
<Tabs.List className='relative flex border-b'>
{tabs.map((tab) => (
<Tabs.Tab
key={tab.value}
value={tab.value}
className='px-3 py-2 text-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-active:text-foreground'
>
{tab.label}
</Tabs.Tab>
))}
{/* A symmetric S-curve: starts gently, lands gently. Tailwind's own
ease-in-out is cubic-bezier(0.4, 0, 0.2, 1), so spell this one out. */}
<Tabs.Indicator className='absolute bottom-0 left-0 h-0.5 w-(--active-tab-width) translate-x-(--active-tab-left) bg-foreground transition-[translate,width] duration-300 ease-[cubic-bezier(0.65,0,0.35,1)] motion-reduce:transition-none' />
</Tabs.List>
{tabs.map((tab) => (
<Tabs.Panel
key={tab.value}
value={tab.value}
className='py-4 text-sm text-muted-foreground'
>
{tab.text}
</Tabs.Panel>
))}
</Tabs.Root>
);
}Animate the active tab indicator so it slides under the selected tab over 300ms with an ease-in-out curve, cubic-bezier(0.65, 0, 0.35, 1). Move it instantly when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Ease-in-out?
Ease-in-out accelerates gently, moves fastest in the middle, and decelerates into place. It feels natural for things that are already on screen and move to a new spot, because real objects have to get going and then come to rest.
Use it for a tab indicator sliding to the selected tab, a slider thumb snapping to a value, a carousel moving to the next card, or a panel changing size. For elements that appear in response to a click, ease-out is better because it reacts faster.
The CSS ease-in-out keyword is mild. A stronger curve such as cubic-bezier(0.65, 0, 0.35, 1) gives a more deliberate move. Because it is slow at both ends, a long duration makes it feel sluggish; 250 to 400ms is a typical range for moves on screen.
Often confused with
- Ease-out
- Ease-out starts fast and only slows at the end, so it suits elements that enter or respond to a click.
- Asymmetric easing
- Ease-in-out is symmetric: its start and end mirror each other. An asymmetric curve shapes the two ends differently.
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.
Ease-in
An easing curve that starts slowly and speeds up toward the end, like a car pulling away from a stop.
Layout animation
An animation that smoothly moves and resizes elements when the layout changes, such as list items gliding to new spots after a sort or filter.
Tabs
A row of labels that switches between panels of related content in the same spot, showing one panel at a time.
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.