High-Performance Web Animation Principles
Delightful micro-interactions give websites a bespoke, premium feel, but poorly optimized animations can cause severe scroll jank and mobile battery drain.
1. Sticking to Transform and Opacity
Never animate layout properties like top, left, width, or margin which trigger expensive browser reflows. Stick strictly to transform: translate3d() and opacity to harness GPU composite layers.
2. GSAP ScrollTrigger Optimization
Leverage will-change: transform judiciously and clean up dormant ScrollTrigger instances on page unmount to maintain constant 60FPS fluid motion.
