Lottie Animation
A JSON-based vector animation format by Airbnb (now LottieFiles) that renders After Effects animations at any resolution — used for loading spinners, onboarding illustrations, and icon animations.
Plain English
Lottie solves a longstanding problem: designers create beautiful animations in After Effects, but exporting them for web means choosing between a heavy video file or trying to hand-code the same animation in CSS. Lottie uses the Bodymovin After Effects plugin to export the animation as a lightweight JSON file that the Lottie player then renders as an SVG or Canvas in the browser. Because it is vector-based, it scales to any screen resolution with no quality loss and typically weighs far less than an equivalent GIF or video. The practical upside for product teams is that designers maintain full creative control — if the animation needs tweaking, the designer updates the AE file and re-exports; no developer involvement required. Common uses include empty-state illustrations that breathe, onboarding character animations, icon micro-animations (a hamburger icon that morphs into an X), and custom loading spinners.
Technical
Web: npm install lottie-web; then lottie.loadAnimation({ container: el, renderer: "svg", loop: true, autoplay: true, path: "/animations/loader.json" }). React: @lottiefiles/react-lottie-player or lottie-react — <Player src={animationData} loop autoPlay style={{ height: 120 }} />. File size: aim under 100KB for inline animations; anything over 200KB should be lazy-loaded. Renderer choice: svg (best quality, accessible, CSS-styleable) vs canvas (better performance for complex particle animations). Interactivity: lottie-web exposes goToAndPlay(frame), goToAndStop(frame), setSpeed(n), and setDirection(1/-1) for scroll-triggered or hover-triggered playback. LottieFiles.com has a free library of community animations. Always check the JSON for unnecessary data layers exported from AE — they inflate file size significantly.
Live Demo
Lottie-style Animation
CSS-animated SVG mimicking a Lottie success sequence: idle → loading → success.
Idle
Waiting for action
Lottie animations are JSON vector files — scalable, tiny, and designer-friendly.
Usage
✓ Good usage
An empty-state panel showing a character animation that loops gently while the user has no saved items — the Lottie renders crisply on all screen densities and weighs only 48KB.
✗ Bad usage
A full-page background Lottie animation with hundreds of layers exported without optimisation — 2MB JSON file that parses on the main thread and drops frames on mobile devices.
Recommended values
- Loading spinner: loop: true, 1–3s per cycle, under 30KB
- Onboarding illustration: autoplay once, loop: false, under 150KB
- Icon animation: trigger on hover/click via goToAndPlay()
- Empty state: loop: true at reduced speed (setSpeed(0.7))
- Renderer: svg for most cases; canvas only for particle-heavy animations
- Lazy load: IntersectionObserver trigger for below-fold Lotties
Common mistakes
- Unoptimised export — After Effects layers left in the JSON that are invisible or covered inflate file sizes 3–5×. Always run through LottieFiles optimiser or lottie-minimizer before shipping.
- Using canvas renderer for text-heavy animations — canvas renders text as pixels, making it blurry at high DPI and non-selectable by screen readers.
- No reduced-motion handling — Lottie plays regardless of system preferences; manually check window.matchMedia("(prefers-reduced-motion: reduce)") and call anim.goToAndStop(0, true) to freeze on first frame.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add a Lottie animation to the empty state of the saved items panel. Use lottie-react to render the animation JSON from /public/animations/empty-box.json. Set loop: true, autoplay: true, and constrain the height to 160px. Check prefers-reduced-motion: if the user prefers reduced motion, render only the first frame using goToAndStop(0, true) instead of playing. Lazy-load the JSON with a dynamic import so it does not block the initial page load.