АнімаціяСередній

Elastic / Overshoot

Рух, що перелітає ціль і осідає, замість зупинки як укопаний.

animation-principleuijuicespring

Приклади

Записано з інтерактивного демо нижче на цій сторінці.

Огляд

Анімація з овершутом дозволяє елементу трохи пролетіти повз кінцеву позицію, а потім пружно повернутись і осісти — як гумка чи пружина, а не жорсткий стоп.

Це працює, бо майже ніщо в реальному світі з масою та гнучкістю не зупиняється миттєво; усе, що має «люфт», перелітає й коротко коливається. Сам лише ease-in/ease-out (який зупиняється точно на цілі) на цьому фоні виглядає штучно.

Він передає енергію, грайливість і фізичну присутність — попап, що трохи перелітає, здається живим; той, що плавно в'їжджає і мертво зупиняється, — пласким і механічним.

Інтерактивне демо

★

Сила овершуту0.18

Затухання0.55

Де застосовується

UIМенюГіперказуалкиMatch-3

Найкращі практики

Варто

✓Більший овершут залишайте для елементів, що з'являються чи святкують (попапи, нагороди); для частих рухів UI — ледь помітний.
✓Налаштуйте затухання так, щоб усе осідало максимум за 2–3 коливання — довше зчитується як розхлябаність.
✓Використовуйте пружинну анімацію (маса/жорсткість/затухання), а не ручні кейфрейми, коли ціль може змінитись у польоті (наприклад, drag-and-release).

Не варто

✕Не додавайте овершут елементам, що мають одразу стати в точну, зчитувану позицію (наприклад, значення, яке гравець мусить точно прочитати).
✕Не використовуйте один конфіг пружини для всіх елементів UI — маленька іконка і повноекранна панель не повинні рухатись однаково.
✕Не поєднуйте сильний овершут із сильним сквошем на одному об'єкті — обирайте одну домінантну техніку на елемент.

Поширені помилки

⚠Овершут такий великий, що елемент помітно вилітає за свої межі чи область обрізання.
⚠Пружинна фізика на об'єкті, який гравець активно тягне, — вона бореться з інпутом.
⚠Овершут на станах помилки, де впевнений рух без відскоку читається краще.

Реалізація

Встав це у свого ШІ-асистента (Cursor, Copilot, Claude), щоб додати ефект у проєкт.

Промт

Додай у мій проєкт ефект "Elastic / Overshoot": Рух, що перелітає ціль і осідає, замість зупинки як укопаний.

Як це працює: Анімація з овершутом дозволяє елементу трохи пролетіти повз кінцеву позицію, а потім пружно повернутись і осісти — як гумка чи пружина, а не жорсткий стоп.

Рекомендації:
- Більший овершут залишайте для елементів, що з'являються чи святкують (попапи, нагороди); для частих рухів UI — ледь помітний.
- Налаштуйте затухання так, щоб усе осідало максимум за 2–3 коливання — довше зчитується як розхлябаність.
- Використовуйте пружинну анімацію (маса/жорсткість/затухання), а не ручні кейфрейми, коли ціль може змінитись у польоті (наприклад, drag-and-release).

Чого уникати:
- Не додавайте овершут елементам, що мають одразу стати в точну, зчитувану позицію (наприклад, значення, яке гравець мусить точно прочитати).
- Не використовуйте один конфіг пружини для всіх елементів UI — маленька іконка і повноекранна панель не повинні рухатись однаково.
- Не поєднуйте сильний овершут із сильним сквошем на одному об'єкті — обирайте одну домінантну техніку на елемент.

Реалізуй ефект у тому рушії/стеку, який уже використовується в проєкті, і дотримуйся наявного стилю коду. Підключи його там, де це доречно.