Smooth Animations
jQuery animations trigger layout reflows. Use CSS transitions instead, triggered by jQuery class toggles, for GPU-accelerated smooth animations.
jQuery
Intermediate
4 min read
Animation Performance
Example
/* CSS transition (GPU-accelerated, 60fps) */
.panel { transition: transform 0.3s ease, opacity 0.3s ease; }
.panel.hidden { transform: translateY(-10px); opacity: 0; pointer-events: none; }
/* jQuery toggles the class — CSS does the animation */
$("#toggle").on("click", () => $("#panel").toggleClass("hidden"));
// When you must use jQuery animate, prefer transform over position:
$("#box").animate({ opacity: 0 }, 300); // OK
// Avoid: animating top/left causes reflow every frame:
// $("#box").animate({ top: 100 }, 300); // BAD Pro Tip
CSS transform and opacity are the only properties animated on the GPU — everything else triggers layout.