will-change
A CSS property that tells the browser an element is about to animate, so it can prepare, often by giving the element its own layer ahead of time.
const photos = [
{ src: '/photos/dunes.jpg', alt: 'Sand dunes at dawn' },
{ src: '/photos/harbor.jpg', alt: 'Boats in a quiet harbor' },
{ src: '/photos/forest.jpg', alt: 'Fog in a pine forest' }
];
export function PhotoGrid() {
return (
<ul className='group grid grid-cols-3 gap-3'>
{photos.map((photo) => (
<li
key={photo.src}
// The hint goes on only while the pointer is over the grid, just
// before a card lifts, and comes off when it leaves. Tailwind's
// translate-* and scale-* set the translate and scale properties,
// so the hint names those instead of transform.
className='overflow-hidden rounded-xl transition-[translate,scale] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:will-change-[translate,scale] hover:-translate-y-1 hover:scale-[1.02] motion-reduce:transition-none'
>
<img
src={photo.src}
alt={photo.alt}
className='aspect-square w-full object-cover'
/>
</li>
))}
</ul>
);
}Add will-change: transform to the gallery cards only while they animate: set it when the pointer enters the grid, just before the 300ms hover lift, and remove it when the pointer leaves. Do not leave it on every card permanently.
Paste into Layerwise or any AI coding tool.
will-change explained
Setting will-change: transform or will-change: opacity tells the browser which properties are about to change. It may respond by promoting the element to its own compositor layer before the animation starts, so the first frames do not pay for creating and painting that layer.
It is only a hint, and browsers are free to ignore it. Reach for it to fix a real problem, such as an animation that stutters on its first frames or an element that moves constantly, like a draggable card.
Every promoted layer keeps its own bitmap in memory, so putting will-change on many elements, or on *, can make a page slower and use up memory on low-end phones. Add it shortly before the motion, for example on hover or pointer down, and remove it when the animation ends.
It has side effects: will-change: transform creates a new stacking context and becomes the containing block for position: fixed children, which can change how z-index and fixed elements behave.
Often confused with
- GPU acceleration
- GPU acceleration is the browser compositing layers on the graphics chip.
will-changeonly asks it to set up a layer early.
Related terms
All termsGPU acceleration
A browser technique where the graphics chip moves, fades, or scales an element on its own layer instead of redrawing the page every frame.
Jank
Visible stutter in an animation or scroll, caused when the browser misses frames because it cannot finish its work in time.
Z-index
A CSS property that decides which element appears on top when elements overlap, with higher numbers sitting closer to the viewer.
Layout thrashing
A slowdown caused by code that alternates style changes with size reads, forcing the browser to recalculate layout many times in one frame.
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.