Анімації на сайті: які підвищують конверсію
GSAP, ScrollTrigger, Lottie та 3D — що справді впливає на заявки, а що лише прикрашає. 6 прийомів з цифрами й анти-патерни, що гальмують сайт.
Коротко: анімація — це інструмент уваги, а не прикраса. Корисна анімація відповідає на три питання: куди дивитись (напрям поглядом), що щойно змінилось (фідбек), і чому цей бренд особливий (емоція). Решта — «вау за ваші гроші»: −15% швидкості, + скарги на мерехтіння, нуль у конверсії. Нижче — 6 прийомів, які ми перевірили на реальних проєктах.
6 прийомів, які працюють на заявку
- Скрол-сторітелінг для дорогих рішень. Коли користувач скролить, продукт «збирається» з фрагментів — класика для корпоративних сайтів у фінансах та промисловості. Працює, бо контролює увагу в обмін на скрол — єдину безкоштовну для користувача взаємодію.
- Мікро-фідбек на дії. Кнопка «помʼякшує» натиск, форма підсвічує наступне поле, кошик летить у іконку. Кожен фідбек прибирає мікротривогу «я натиснув?» — а це прямий шлях до конверсії.
- Lottie замість відео. Векторна анімація важить 20–100 KB, чітка на Retina, керується з коду. Пояснення складного процесу в 8 секунд через Lottie дає більше заявок, ніж 2-хвилинне відео, яке ніхто не дивиться.
- Побудова сенсів через hero-сцену. Перші 3 секунди вирішують, чи залишиться відвідувач. WebGL-сцена, яка показує результат (а не «кружечки»), +12–18% утримання на наших проєктах.
- Highlight-анімація цифр. Лічильники, що «докручують» значення при скролі — простий прийом, але саме він перетворює статичні факти на відчутний доказ.
- Reduced-motion як частина дизайну. Уважність до доступності піднімає довіру B2B-клієнта: сайт не атакує, коли користувач просив його не анімувати.
Три анти-патерни, на які не погоджуйтесь
«Паралакс усього» — параліч уваги замість керування нею.
Прелоадер з лого на 3 секунди: так, красиво; ні, Google та користувачі це не люблять.
Автоплей-відео без опції вимкнення — прямий шлях до «пішов геть» на мобільному.
Який рівень анімацій потрібен саме вашій ніші
Універсальної відповіді немає. Практика по наших проєктах така:
| Ніша | Рівень | Що працює | Чого не робити |
|---|---|---|---|
| Фінанси, промисловість, B2B-послуги | середній | скрол-сторітелінг, лічильники, мікро-фідбек форм | 3D «ради ефекту», автоплей |
| E-commerce косметики, одягу | високий на товарі | 360° огляд, зум, анімація додавання в кошик | довгі інтро перед каталогом |
| Локальні послуги, майстри | низький | фідбек кнопки й форми, плавні переходи між секціями | паралкс усього, важкі фонові відео |
| SaaS / веб-застосунки | середній+ | анімований демо-потік інтерфейсу, підсвітка кроків | декоративні сцени замість продукту |
| Готелі, ресторани, events | високий | атмосферні сцени, рух фото, Lottie в меню | повноекранне відео без fallback |
Орієнтир простий: чим дорогіше рішення й довший цикл угоди, тим більше сенсу в анімації, що пояснює; чим ближче до імпульсної покупки, тим більше цінна швидкість, а не рух.
Скільки це коштує в розробці
GSAP-анімації другого рівня (скрол-сценарії, розумні фідбеки) додають 15–30% до вартості frontend — це нормально, якщо анімація є частиною воронки, а не «родзинкою». 3D/WebGL-сцени — від +25%. У нашому пакеті Бізнес анімації вже враховані, окрема послуга — сайти з анімаціями від 29 000 ₴ (~$699). Чи варто вам 3D окремо — чесний розбір у статті 3D на сайті: коли це продає.
Правило DEXA
Кожна анімація має «роботу». Перед розробкою ми формулюємо: цей ефект уповільнює скрол до CTA / утримує погляд на цифрі / веде до форми. Ефект без формулювання — не робимо, бо він коштує вам грошей і швидкості.
Бюджет швидкості: що припустимо, а що ні
Норматив, з яким ми заходимо в розробку анімованого сайту:
| Метрика | Бюджет | Як тримаємо |
|---|---|---|
| LCP | < 1,4 с | Hero-сцена лінива, перший кадр — статичний webp |
| INP | < 200 мс | TS/worker-логіка поза main thread, без layout-thrashing |
| CLS | ≈ 0 | Резервовані висоти блоків, transform/opacity замість top/height |
| Вага сцени | < 300 KB | Draco-компресія GLB, Lottie замість відео |
Як перевірити, що анімація справді дала ефект
«Красиво» — це не метрика. Схема, якою ми міряємо рух на проєктах:
- Фіксуємо базову поведінку — GA4-події перегляду секції, кліки CTA, глибина скролу.
- Вмикаємо ефект на частині трафіку (або A/B на двох збірках) на 2 тижні — не «заднями подивимось».
- Порівнюємо дві цифри: конверсію в заявку й час до першого кліку. Швидкість при цьому має залишитися в зеленій зоні.
- Залишаємо лише те, що не погіршило — ефект, який «не заважав», все одно коштує грошей у підтримці.
Чи вбивають анімації мобільну конверсію?
Ні — якщо рендер увімкнений лише у видимій зоні, а важкі сцени мають спрощення на слабких пристроях. Вбиває інше: автоплей-відео на весь екран і паралакс, який змушує сторінку перераховувати layout при кожному скролі. На мобільному трафіку 55–70% саме там ціна зайвих мілісекунд найвища.
Чи бачать анімований контент AI-пошуковики й сканери Google?
Вони бачать DOM і текст, а не рух — тому сценарій має жити в розмітці: заголовки секцій, alt, текстовий опис того, що показано анімовано. Якщо сенс є тільки в анімації, пошук його не індексує. Це ж правило працює для GEO та AI-видачі.
3D чи Lottie — що обрати?
Lottie — для пояснення процесу, ікон, станів і «живих» елементів інтерфейсу: дешевше, легше, без ризику для швидкості. 3D/WebGL — коли товар варто показати зсередини: техніки, меблі, упаковка, об’єкт нерухомості. Починати рекомендуємо з одного інтерактивного товару, а не з усієї вітрини.
Як не зламати швидкість і SEO
Рендер лише у видимій зоні (viewport-gated), transform/opacity замість layout-властивостей, prefers-reduced-motion — і Lighthouse лишається зеленим. Ми тестуємо анімований сайт на реальних пристроях на етапі QA; детальніше про зв’язок швидкості й грошей — у гайді як швидкість сайту впливає на виручку.
Хочете анімований сайт без «вау-податку»? Обговорити проєкт → — покажемо на прикладах, які ефекти вашій ніші додадуть заявок, а які краще не робити взагалі.
корпоративний · Лайт від 55 000 ₴ (~$1,325) · корпоративний · Стандарт від 89 000 ₴ (~$2,145) · корпоративний · Преміум від 145 000 ₴ (~$3,494)
Потрібне таке саме рішення для вашого бізнесу?
Сайт компанії з авторським дизайном і анімаціями: послуги, кейси, команда, мови й адмінка. Структуру будуємо під запити клієнтів у Google.
- Від 5 сторінок: послуги, кейси, команда, ціни
- Лайт — індивідуальний макет без складних анімацій
- Стандарт — авторський дизайн, GSAP, дві мови, адмінка
Отримайте безкоштовний аудит сайту за 48 годин
Швидкість, SEO, конверсія — звіт на 12 сторінок із пріоритезованим планом поліпшень. Без зобовʼязань і спаму: ми покажемо, що виправити, навіть якщо ви не станете нашим клієнтом.
