Таймінг анімацій і UX-сприйняття

1) Чому таймінг критичний

• почуття миттєвого відгуку і довіра до системи;
• ясність причин-слідчих зв'язків (звідки/куди перемістився елемент);
• стомлюваність і комфорт у тривалих сесіях;
• точність дій (особливо на мобільних і при високих ставках).

Правило: таймінг служить сенсу. Якщо анімація не допомагає зрозуміти «що сталося», вона заважає.

2) Психофізика і пороги

• ≤ 50 мс - відлуння введення (друк, клік-ефект); здається миттєвим.
• ≤ 100 мс - перший візуальний фідбек по дії (кнопка «натиснулася»).
• 120-180 мс - hover/focus, «м'який» перехід стану.
• 180-280 мс - модалки/панелі; сприймається як «природна» поява.
• 300-500 мс - уважне переміщення (shared element), прогрес «крок вперед».
💡 700 мс - ризики «повільності»; залишайте тільки якщо несе сенс (наприклад, підтвердження виграшу).
• ≈ 1200-1600 мс - цикл skeleton/shimmer; довше - втомлює.

3) Криві прискорення (easing) і «вага»

• Стандарт: `cubic-bezier(0. 2, 0, 0. 2, 1)'- нейтральна «матеріальна» динаміка.
• Прискорення (pressed): `cubic-bezier(0. 4, 0, 1, 1)'- швидкий вхід, короткий клік.
• Уповільнення (overlay out): `cubic-bezier(0, 0, 0. 2, 1)'- м'який вихід.
• Підкреслений акцент (рідко): `cubic-bezier(0. 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Оптика ваги: чим більший компонент (картка, дроуер), тим довша тривалість (+ 40-80 мс до базової).

4) Фази та хореографія

1. Ініціація (10-40 мс): легкий fade/scale 0. 98→1 - сигнал початку.

2. Транспорт (основна фаза): переміщення/розкриття.

3. Осадка (20-60 мс): невелике гальмо, стабілізація тіні/кільця фокусу.

• Списки: 20-40 мс/елемент, максимум 6-8 елементів поспіль.
• Форми: без каскаду; все з'являється одночасно, щоб не заважати вводу.

Оборотність: «назад» дзеркалить «вперед» і швидше на 15-30%.

5) Таймінги за типами взаємодій

6) Сприйняття часу: як «прискорити» без реального прискорення

Instant affordance: миттєва зміна cursors/pressed-стилю ≤ 100 мс ще до мережі.
Приховування складності: паралеліть завантаження; фонове підтягування даних до відкриття панелі.
Смисловий якір: shared element і напрямок руху зменшують когнітивну вартість очікування.
Оптимістичні оновлення: UI «готовий» відразу, сервер підтверджує або відкочує.

7) Стомлюваність і гігієна анімацій

Уникайте нескінченних пульсацій; будь-який цикл повинен бути переривчастим або вимкненим.
Мікроефекти на масивах елементів (таблиця, грід) робіть без blur/box-shadow на кожному вузлі.
Підтримуйте'prefers-reduced-motion: reduce`: залишайте тільки fade ≤ 100 мс або статичний перемикач стану.

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) Токени таймінгів (дизайн-система)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Іменування: `motion. duration.{role}` и `motion. easing. {role}'- єдині для рушія компонентів і Figma.

9) Реалізація: CSS и Framer Motion

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10) Композиція часу: паралель vs послідовність

Паралель (fade + translate одночасно) - швидше по відчуттю.
Послідовність (спочатку контейнер, потім контент) - ясніше структуру, але довше. Застосовуйте, коли важливо показати ієрархію.
Уникайте «сходинок»> 60 мс між тісно пов'язаними елементами в одному блоці.

11) Таймінг і контент

Текст: не анімуйте letter/word-by-word у продуктах; це маркетингова техніка.
Числа/лічильники: крок 40-60 мс батчами, без тремтіння layout (tabular-nums).
Графіки: розкриття серії 180-240 мс, hover-highlight ≤ 120 мс.

12) Доступність і помилка сприйняття

Фокус-стилі повинні з'являтися без затримки.
Попередження/помилки - анімація мінімальна (≤ 120 мс), без тряски, якщо користувач з AT (assistive tech).
Уникайте спалахів> 3/с і великих контрастних мерехтінь.

13) Специфіка iGaming

• Press ≤ 100 мс; статус'busy'відразу; підсумковий тост/індикатор - без затримок.
• Таймінг відгуку UI важливіше анімації підтвердження: підтвердження коротке 120-160 мс.

• Старт ≤ 200 мс, рівномірний цикл, гальмування 300-500 мс; ніяких нескінченних мерехтінь.
• Win-сплеск ≤ 500 мс, без строба; текст суми - AAA.

• Оновлення батчами (250-1000 мс); візуальний дифф ≤ 160 мс; без стрибків макета.
• На hover/focus - дебаунс підсвічування 80-120 мс, щоб не «блимало».

14) Анти-патерни

Лінійні криві для переміщень (відчуття «механічності»).
Тривалості> 400 мс для простих станів кнопки.
Каскад 100 + мс за списком з десятків елементів (тягомотина).
Тіні/blur на сотнях елементів в анімації.
Неузгодженість: однакові дії з різними таймінгами в одному продукті.
Відкладений фокус або затримка на активацію по клавіатурі.

15) QA-чек-лист таймінгів

Консистентність

• Таймінги і криві беруться з токенів, однакові для однакових дій.

Відгук

• Press/hover/focus укладаються в шкалу 80-180 мс.
• Перший візуальний відгук ≤ 100 мс.

Хореографія

• Вхід і вихід симетричні; вихід швидше входу на 15-30%.
• Каскад не перевищує 8 елементів і 40 мс крок.

A11y

• 'prefers-reduced-motion'підтриманий; фокус без затримки.
• Немає миготінь> 3/с.

Перформанс

• Анімуються тільки'transform/opacity'; немає масових blur/тіней.

16) Документація в дизайн-системі

«Motion Tokens»: duration/easing/stagger + карта застосувань (button, overlay, tab, list).
«Rhythm & Phasing»: схеми каскаду і оборотності.
«Reduce Motion»: правила деградації та приклади.
«Do/Don’t»: короткі кліпи з таймкодами і цільовими метриками (INP/First Feedback).

Коротке резюме

Хороший таймінг - це миттєвий відгук, зрозуміла хореографія і економні криві. Тримайте короткі тривалості для мікро-станів, розтягуйте тільки там, де це додає сенсу, підтримуйте reduce-motion і не анімуйте «дорогі» властивості. Тоді інтерфейс відчувається живим і надійним - особливо в сценаріях реального часу і високих ставок.