Lottie — Airbnb. After Effects → JSON → веб. 10-100KB. Сейчас стандарт.
Как работает
Designer After Effects. Bodymovin plugin → JSON. Lottie player render в браузере.
Преимущества
Малый размер, scalable, interactive, cross-platform.
Где использовать
Hero, loading, empty state, success/error, onboarding, microinteractions.
LottieFiles
lottiefiles.com — marketplace. Free план 100+ animations.
Добавление
lottie-player web component. CDN.
JavaScript control
play, pause, speed, frame. Events.
Customization
JSON edit. LottieFiles Editor.
Performance
GPU accelerated. Не больше 5 на странице. Lazy load.
Lottie vs SVG vs CSS
Simple — CSS/SVG. Complex — Lottie.
React/Vue
@lottiefiles/react-lottie-player. vue-lottie.
File size
50KB max. Optimize tool.
Mobile
Lazy load. Pause при scroll.
Accessibility
prefers-reduced-motion. aria-hidden.
Ошибки
Большие файлы, auto-play loop, mobile perf, нет a11y.
Примеры
Dropbox 404, Mailchimp onboarding, GitHub errors.
Сайт.uz
Hero, success, empty state, 404. 30-60KB. Lazy load. prefers-reduced-motion.