Motion Graphics, Lottie & 3D
Richer visual tools than a CSS transition — with a correspondingly higher cost if used carelessly.
4.8.1Definition
Motion graphics and Lottie animations (vector-based animations exported from design tools and played via lightweight runtime libraries) provide richer, more complex visual sequences than CSS-only transitions (3.35) can achieve, at a fraction of the file weight of traditional video. 3D graphics add depth and interactivity for product showcases or immersive experiences.
4.8.2When to Use — and When Not To
Use Lottie for polished, designer-authored animations (onboarding illustrations, success states) that need to be crisp at any size and lightweight to load. Use 3D sparingly and only where it materially adds understanding (product configurators, spatial data) — 3D adds real performance and complexity cost that rarely pays off for typical business content.
4.8.3Common Mistakes
- Using heavy video or 3D for what a simple CSS transition could achieve, paying unnecessary performance cost for marginal visual gain.
- No fallback or reduced-motion consideration for complex animations, ignoring users with motion sensitivity or slow connections.
4.8.4Best Practices
- Reach for the lightest tool that achieves the needed effect: CSS transition first, Lottie next, video/3D only when genuinely justified.
- Always provide a reduced-motion fallback, per the accessibility standard established in Chapter 3.35.