Анімація на сайті — це не прикраса, а розмітка уваги: вона підказує, що з’явилося, що клікабельне і що щойно змінилося. Проблеми починаються, коли рух перестає нести інформацію і стає самоціллю.
Три ролі корисного руху
Перед тим як додати анімацію, ми питаємо: яку з трьох ролей вона грає?
- Орієнтація: reveal при скролі показує ієрархію — що головне, що другорядне.
- Зворотний зв’язок: hover і tap підтверджують «я почув твій клік».
- Зв’язність: перехід між станами пояснює, звідки що взялося.
Правила, які нас рятують
Тривалість до 0.7 секунди для появи блоків і до 0.3 — для мікровзаємодій. Один easing на весь проєкт. Анімуємо тільки transform і opacity — layout не чіпаємо ніколи.
І залізне правило: кожна нескінченна анімація має вимикатися через prefers-reduced-motion. Це не опція «для галочки», а базова повага до користувача.
КОМАНДА WORONAWEB21.05.2026