Lottie-анімації на сайт: інтеграція, налаштування, оптимізація

Впровадження Lottie-анімацій: від ідей до готових рішень

Типова ситуація: замовник просить «гарну анімацію завантаження», а готовий GIF важить 800 КБ, пливе на Retina і не підтримує прозорість. Веб-анімація на основі Lottie вирішує ці проблеми. Це JSON-формат для векторних анімацій, експортованих з After Effects через плагін Bodymovin. Він відтворюється через JavaScript або нативні рендерери, зберігаючи якість на будь-якому DPI і займаючи в 10 разів менше місця, ніж GIF. За 5+ років ми реалізували понад 50 Lottie-інтеграцій — від простих іконок до складних сцен з керуванням через API. Пропонуємо готову інтеграцію під ключ з оптимізацією Lottie-файлів і кастомізацією поведінки. Наприклад, анімація завантаження у форматі .lottie важить лише 18 КБ проти 500 КБ у GIF — економія трафіку до 90%. Один із клієнтів заощадив 5000 гривень на місяць на хостингу після заміни GIF на Lottie. В середньому клієнти скорочують бюджет на анімації на 40%. Вартість робіт з інтеграції починається від 10 000 грн.

Які проблеми вирішуємо

• Тяжкі анімації погіршують LCP і CLS. Lottie-анімація важить в 10 разів менше GIF і апаратно рендериться на будь-якому пристрої. Використовуючи формат .lottie, ми знижуємо LCP на 20% і економимо до 70% трафіку.
• Відсутність інтерактивності — ми додаємо керування відтворенням, швидкість, прив'язку до скролу або ховеру. Наприклад, анімація іконки при наведенні запускається одноразово за допомогою playSegments. Інтерактивні іконки підвищують залученість.
• Погана мобільна підтримка — Lottie рендериться апаратно, без втрати якості. Це особливо важливо для клієнтів, які використовують старі смартфони.
• Складна інтеграція — налаштовуємо плеєр, кешування і ледаче завантаження, щоб не навантажувати головний потік. Всі компоненти покриті TypeScript-типами.

Чому Lottie-анімації кращі за GIF?

GIF обмежений 256 кольорами, не масштабується і важить багато. Lottie — векторний формат, підтримує прозорість, інтерактивність і апаратне прискорення. Наприклад, анімація завантаження в GIF важить 500 КБ, а в Lottie — 50 КБ (JSON) або 18 КБ (.lottie). Це знижує LCP на 20% і покращує Core Web Vitals. На відміну від GIF, Lottie можна масштабувати без втрати чіткості і керувати відтворенням з коду. Крім того, .lottie завантажується на 80% швидше JSON.

Яку бібліотеку обрати: dotLottie чи lottie-react?

Для нових проєктів ми рекомендуємо dotlottie-react (60 КБ gzip) з форматом .lottie. Він легший, швидше завантажується і підтримує сучасні можливості: прогресивне завантаження, анімації по частинах. Для зворотної сумісності або роботи з існуючими JSON-анімаціями використовуйте lottie-react (180 КБ gzip). Нижче порівняння в таблиці.

Як ми це робимо: стек і кейс

Використовуємо React + TypeScript, бібліотеку @lottiefiles/dotlottie-react (60 КБ gzip). Для старих проєктів — lottie-react (180 КБ gzip). Вибір формату: .lottie (бінарний, в 10 разів легший за JSON) для нових проєктів, JSON — для зворотної сумісності.

Кейс: замовник хотів лоадер для SPA на Next.js. Ми зробили компонент з Suspense: анімація з'являється під час завантаження даних і зникає після завершення. Код лоадера:

// components/PageLoader.tsx import { DotLottieReact } from '@lottiefiles/dotlottie-react' export function PageLoader() { return ( <div className="fixed inset-0 flex items-center justify-center bg-white z-50"> <DotLottieReact src="/animations/loader.lottie" loop autoplay style={{ width: 120, height: 120 }} /> </div> ) } 

Цей код завантажує анімацію тільки при рендері компонента, не блокуючи основний контент. В результаті LCP знизився з 3.2 до 1.8 секунди. Середня вартість розробки таких анімацій знизилася на 40% завдяки повторному використанню компонентів. Створюючи інтерактивні іконки, ми домагаємося залучення користувачів.

Керування Lottie-анімаціями через API

Керування через JavaScript API: play(), pause(), stop(), setSpeed(), seekTo(). У React використовуйте хук dotLottieRefCallback для отримання екземпляра плеєра. Наприклад, для відтворення анімації при наведенні:

const dotLottieRefCallback = (dotLottie: any) => { // викликаємо при onMouseEnter dotLottie.stop() dotLottie.play() } 

Можна прив'язати анімацію до прогресу скролу, використовуючи подію scroll і метод seek(). Це дозволяє створювати паралакс-ефекти на основі Lottie.

Порівняння форматів: JSON vs .lottie

Процес роботи

1. Аналітика — обговорюємо анімації, їх типи та поведінку (циклічні, по ховеру, при скролі).
2. Проєктування — обираємо формат, рендерер, архітектуру компонентів (один загальний або кілька вузькоспеціалізованих).
3. Реалізація — пишемо компонент, налаштовуємо керування (play/pause/seek), додаємо кешування та попереднє завантаження.
4. Тестування — перевіряємо на мобільних, планшетах, десктопах; заміряємо LCP/CLS за допомогою Lighthouse.
5. Деплой — підключаємо через npm, оптимізуємо бандл (code-splitting), налаштовуємо lazy load через IntersectionObserver.

Типові помилки при інтеграції Lottie

• Ігнорування розміру — великий JSON (500+ КБ) збільшує LCP. Використовуйте .lottie або обрізайте зайві кадри.
• Відсутність ледачого завантаження — анімація грузиться одразу, блокуючи контент. Підключайте через IntersectionObserver.
• Немає fallback — старі браузери не підтримують WebGL. Ми використовуємо перевірку і показуємо статичну картинку.
• Надмірна кількість плеєрів — один екземпляр плеєра на сторінку може відтворювати кілька анімацій по черзі, економлячи пам'ять.

Що входить в нашу роботу

• Готовий React-компонент з TypeScript-типами.
• Підтримка .json та .lottie форматів.
• Кешування та попереднє завантаження анімацій.
• Адаптивний розмір під контейнер.
• Документація по використанню та кастомізації.
• Підтримка після впровадження (1 місяць).

Наша команда має більше 5 років досвіду і виконала понад 50 успішних кейсів. Для клієнта з інтернет-магазину зменшили LCP з 4.2 до 2.1 секунди, що збільшило конверсію на 15%. Отримайте консультацію з інтеграції Lottie-анімацій на ваш сайт. Оцінимо проєкт безкоштовно і запропонуємо оптимальне рішення. Замовте інтеграцію і покращіть користувацький досвід. Гарантуємо сумісність з усіма сучасними браузерами.

Джерело: офіційна документація LottieFiles