Lottie comes from Airbnb. After Effects → JSON → web. 10-100KB. Now a standard.
How it works
The designer works in After Effects. The Bodymovin plugin exports JSON. The Lottie player renders it in the browser.
Benefits
Small size, scalable, interactive, cross-platform.
Where to use
Hero, loading, empty state, success/error, onboarding, microinteractions.
LottieFiles
lottiefiles.com — marketplace. Free plan 100+ animations.
Adding to a site
lottie-player web component via CDN.
JavaScript control
play, pause, speed, frame. Events.
Customisation
Edit JSON. LottieFiles Editor.
Performance
GPU-accelerated. Not more than 5 per page. Lazy load.
Lottie vs SVG vs CSS
Simple animations — CSS/SVG. Complex — Lottie.
React/Vue
@lottiefiles/react-lottie-player. vue-lottie.
File size
50KB max. Optimize tool.
Mobile
Lazy load. Pause when scrolled.
Accessibility
prefers-reduced-motion. aria-hidden.
Mistakes
Large files, auto-play loops, poor mobile perf, no a11y.
Examples
Dropbox 404, Mailchimp onboarding, GitHub errors.
Sayt.uz
Hero, success, empty state, 404. 30-60KB. Lazy load. prefers-reduced-motion.