You've built a beautiful animation. It looks perfect in your dev environment. Then it ships, and on a mid-range Android phone, it stutters at 20fps. This guide explains exactly why that happens and how to prevent it every single time.
Understanding the Browser Rendering Pipeline
Every frame your browser renders goes through a pipeline: JavaScript → Style → Layout → Paint → Composite. The further down the pipeline a CSS property change triggers, the more expensive it is to animate. The goal is always to animate properties that only trigger the Composite step.
The Compositor-Only Properties Cheatsheet
- ✓ transform: Moves, scales, rotates on the GPU. Always use this.
- ✓ opacity: Pure GPU. Zero layout cost. Use it freely.
- ⚠ filter: GPU-accelerated but can be expensive on complex effects.
- ✗ width/height: Triggers full Layout + Paint. Never animate these.
- ✗ top/left: Triggers Layout. Use transform: translate() instead.
- ✗ background-color: Triggers Paint on every frame. Use opacity on a layer instead.
will-change: Your Secret Weapon
The will-change CSS property is a hint to the browser: "This element is about to be animated. Please promote it to its own compositor layer now." This pre-promotion saves the browser from doing expensive layer creation mid-animation. Use it surgically — over-using it consumes significant GPU memory.
The 300ms Problem with Mobile Hover
Hover-triggered animations on mobile are a classic mistake. Touch devices don't have a "hover" state the way a mouse does. Any CSS transition triggered on :hover will cause a 300ms delay or behave unpredictably. Use :focus-visible and JavaScript touch events instead of hover for interactive animations targeting mobile users.
"Animating the wrong CSS property is like flooring the gas with the parking brake on. The browser is screaming, but you're going nowhere fast."
Measuring Real Performance: DevTools
Open Chrome DevTools, go to the Performance tab, and record while your animation plays. Look for:
- Long Tasks (red flags): Any task over 50ms is "long" and will cause visible jank.
- Layout Shifts: Green bars in the timeline indicate layout recalculations during animation.
- Frames Per Second: The FPS meter in the top-right corner. You want a solid 60fps line.
Conclusion
Smooth animations are an engineering discipline, not just a design choice. By respecting the browser rendering pipeline and using GPU-composited properties, you can guarantee silky-smooth motion on every device.
CreativeFreedom.
Stop paying for single-use assets. Extract premium Lottie animations, 3D icons, and SVG vectors from IconScout & LottieFiles — instantly, for free.
