Will-Change
ELI5 — The Vibe Check
Will-change is like telling the browser 'heads up, I'm about to animate this thing.' The browser pre-allocates resources so the animation is smooth. But overuse it and the browser allocates resources for everything, like a restaurant that sets every table for a party that never comes.
Real Talk
The will-change CSS property hints to browsers which properties will be animated, allowing pre-optimization through layer promotion and GPU allocation. It should be applied just before an animation and removed after. Overuse wastes memory by creating unnecessary compositing layers.
Show Me The Code
.card {
transition: transform 0.3s;
}
.card:hover {
will-change: transform;
}
When You'll Hear This
"Add will-change: transform before the animation starts, not on page load" / "We removed will-change from 50 elements and saved 200MB of GPU memory"
Related Terms
Compositing
Compositing is the final step where the browser assembles all the painted layers into the image you see on screen, like stacking transparent sheets in a pr...
CSS Transform
CSS Transform lets you rotate, scale, skew, and move elements without messing up the page layout.
GPU Acceleration
GPU acceleration is when the browser offloads rendering work to your graphics card instead of making the CPU do everything.