Scale in
Also called zoom in animation or scale-in animation
An entrance animation where an element grows from slightly smaller than its final size to full size while it fades in.
import { Popover } from '@base-ui/react/popover';
export function SharePopover() {
return (
<Popover.Root>
<Popover.Trigger className='rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted data-popup-open:bg-muted'>
Share
</Popover.Trigger>
<Popover.Portal>
<Popover.Positioner sideOffset={8}>
{/* Grows from 0.95 out of the trigger's side (--transform-origin) in 180ms, closes in 120ms. */}
<Popover.Popup className='w-72 origin-(--transform-origin) rounded-xl border bg-background p-4 shadow-lg outline-none transition-[opacity,scale] duration-180 ease-out data-ending-style:opacity-0 data-ending-style:duration-120 data-starting-style:opacity-0 motion-safe:data-ending-style:scale-95 motion-safe:data-starting-style:scale-95'>
<Popover.Title className='text-sm font-semibold'>
Share this project
</Popover.Title>
<Popover.Description className='mt-1 text-sm text-muted-foreground'>
Anyone with the link can view it.
</Popover.Description>
<input
readOnly
aria-label='Project link'
value='https://example.com/p/launch-plan'
className='mt-3 w-full rounded-md border bg-muted px-2 py-1.5 text-sm'
/>
</Popover.Popup>
</Popover.Positioner>
</Popover.Portal>
</Popover.Root>
);
}Animate the popover so it scales from 0.95 to 1 and fades from 0 to 1 over 180ms with ease-out, with transform-origin set to the side of the button that opened it. Reverse it in 120ms on close, and use a plain fade when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Scale in?
A scale in animates transform: scale from a value below 1 up to 1, usually together with opacity. The element seems to come toward the reader, which gives popovers, dialogs, and menus a feeling of opening.
Start close to full size. Growing from 0.9 or 0.95 feels refined. Growing from 0 makes the content balloon out of a dot, and readers see squashed text for most of the animation. Small things like badges and icons are the exception and can start much smaller.
Set transform-origin to where the element comes from: the button that opened a menu, or the center for a dialog. Keep it quick, around 150 to 250ms with ease-out, and use a plain fade when someone prefers reduced motion.
Often confused with
- Pop in
- A pop in overshoots past full size and settles back. A scale in stops at full size without a bounce.
Related terms
All termsPop in
An entrance animation where an element scales up past its full size and settles back, giving it a quick, springy arrival.
Transform origin
The point an element rotates and scales around. It defaults to the center, and moving it changes where a transform seems to start.
Origin-aware animation
A popover, menu, or tooltip that grows out of the button that opened it, by setting its transform origin on the side facing the trigger.
Popover
A small floating panel anchored to the button that opened it, often with an arrow, holding a few controls and closing when you click outside.
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.