Transform origin
Also called anchor point or pivot point
The point an element rotates and scales around. It defaults to the center, and moving it changes where a transform seems to start.
import { Progress } from '@base-ui/react/progress';
export function UploadProgress({ value }: { value: number }) {
return (
<Progress.Root value={value} className='grid w-72 grid-cols-2 gap-y-2'>
<Progress.Label className='text-sm font-medium'>
Uploading photos
</Progress.Label>
<Progress.Value className='text-right text-sm text-muted-foreground tabular-nums' />
<Progress.Track className='col-span-2 h-2 overflow-hidden rounded-full bg-muted'>
{/* origin-left pins the left edge, so scaleX fills left to right instead of from the center out. */}
<div
className='h-full origin-left bg-blue-600 transition-transform duration-300 ease-out'
style={{ transform: `scaleX(${value / 100})` }}
/>
</Progress.Track>
</Progress.Root>
);
}Make the progress bar fill with transform: scaleX() instead of animating width: set transform-origin: left center on the fill, scale it from 0 to the current progress over 300ms with an ease-out curve, and keep the rounded track static behind it.
Paste into Layerwise or any AI coding tool.
What is Transform origin?
transform-origin accepts keywords like top left or bottom, percentages, or lengths such as 20px 40px. With the default center, a rotating square spins in place. Move the origin to top left and the same rotation swings it like a door on a hinge; scale it from bottom and it grows upward from its base. Translate ignores the origin, since sliding has no pivot.
Set it on purpose whenever motion should come from somewhere: a progress bar that fills with scaleX from left, a dropdown that grows from the corner next to its button, a tooltip that grows out of its arrow.
Change the origin only while the element is at rest. Switching it mid-animation makes the element jump, because the same transform now lands in a different place. SVG shapes measure the origin from the top-left of the whole drawing by default; add transform-box: fill-box to rotate a shape around its own center.
Often confused with
- Origin-aware animation
- Transform origin is the CSS property. Origin-aware animation is the practice of setting it so a popover grows out of the control that opened it.
Related terms
All termsOrigin-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.
Scale
A CSS transform that draws an element larger or smaller around its transform origin, without pushing neighboring elements.
Rotate
A CSS transform that turns an element around its transform origin by an angle, such as `rotate(45deg)`.
Progress bar
A horizontal bar that fills from left to right to show how much of a task is done, or slides in a loop while the total is still unknown.
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.