Slide in
Also called slide-in animation, slide up animation, or fly in
An entrance animation where an element moves into place from one side, often while fading in, so people see where it came from.
import { Dialog } from '@base-ui/react/dialog';
export function SettingsPanel() {
return (
<Dialog.Root>
<Dialog.Trigger className='rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted'>
Settings
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Backdrop className='fixed inset-0 bg-black/30 transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0' />
{/* Slides in from translateX(100%) and back out the same way. Reduced motion fades instead. */}
<Dialog.Popup className='fixed inset-y-0 right-0 flex w-80 max-w-full flex-col gap-6 border-l bg-background p-6 shadow-xl outline-none transition-[translate,opacity] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-safe:data-ending-style:translate-x-full motion-safe:data-starting-style:translate-x-full motion-reduce:data-ending-style:opacity-0 motion-reduce:data-starting-style:opacity-0'>
<div>
<Dialog.Title className='text-base font-semibold'>
Settings
</Dialog.Title>
<Dialog.Description className='mt-1 text-sm text-muted-foreground'>
Changes save automatically.
</Dialog.Description>
</div>
<label className='flex items-center justify-between text-sm'>
Email me about comments
<input type='checkbox' defaultChecked className='size-4' />
</label>
<label className='flex items-center justify-between text-sm'>
Weekly summary
<input type='checkbox' className='size-4' />
</label>
<Dialog.Close className='mt-auto rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground'>
Done
</Dialog.Close>
</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
);
}Slide the settings panel in from the right edge when it opens: start at translateX(100%) and move to 0 over 300ms with cubic-bezier(0.23, 1, 0.32, 1). Slide it back out the same way when it closes, and fade it in instead when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Slide in?
A slide in moves an element along one axis with transform: translate, from an offset position to where it rests. The direction carries meaning: a side panel slides from the edge it lives on, a toast rises from the bottom, and a dropdown drops a few pixels from its button.
Distance changes the feel. Short offsets of 8 to 24px combined with a fade make a polished entrance for cards and menus. Full slides from off-screen suit drawers, sheets, and mobile screens that cover the page.
Slide with transform instead of left or margin, so the browser skips layout work on every frame. Use an ease-out curve, and replace the movement with a fade when someone prefers reduced motion.
Often confused with
- Drawer
- A drawer is a panel component that usually slides in from an edge. Slide in is the motion itself, and it works on any element.
Related terms
All termsFade in
An entrance animation where an element goes from fully transparent to fully visible, so it appears gently instead of popping in.
Translate
A CSS transform that moves an element along the x or y axis while the layout around it stays exactly where it was.
Direction-aware transition
A transition that slides new content in from the side you are heading toward, so going forward and going back move in opposite directions.
Ease-out
An easing curve that starts fast and slows down at the end, so motion feels quick and lands softly.
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.