GFX-301g · Module 3
Animation Performance
3 min read
A beautiful animation that lags, stutters, or causes layout shifts on the user's device is a failed animation. Performance is a design constraint — the animation must look good AND run smoothly across the target device range.
Performance rules for web animations: use CSS transforms and opacity for hardware-accelerated properties. Avoid animating layout properties (width, height, margin, padding) — they trigger reflow. Limit concurrent animations to 3-4 elements — beyond that, frame drops become perceptible on mid-range devices. For video-format animations, target file sizes: hero video under 2MB (autoplay context — users on mobile data), social video under 5MB, background loops under 500KB.
For AI-generated motion served as video: lazy-load all video assets. Use the poster attribute to show the first frame while the video loads. Implement intersection observer to play only when visible — background videos burning CPU off-screen are invisible performance sinks. Provide a reduced-motion fallback for users who prefer-reduced-motion — typically the first keyframe as a static image. Accessibility is not optional, even for decorative animation.
The performance budget is part of the motion style specification. Every animation proposal is evaluated against the budget before generation begins. A visually stunning animation that exceeds the performance budget is redesigned, not deployed.
Do This
- Set performance budgets before generating — file size limits, concurrent animation limits, device targets
- Use hardware-accelerated properties (transform, opacity) for CSS animations
- Provide reduced-motion fallbacks for accessibility — static keyframes as poster images
Avoid This
- Ship an animation that stutters on mid-range devices — test on the target device floor, not the ceiling
- Autoplay heavy video on mobile — data budgets and battery life are user constraints
- Treat performance optimization as a post-production task — it is a design constraint from the start