ВСТУП
Можливо, ви ще памʼятаєте ті статичні сайти, які більше походили на підручник, а не на вебресурс, яким ми його уявляємо зараз. Одним із багатьох важливих поінтів різниці між ними є анімація. Анімації — це не просто коли «щось крутиться» на сторінці для краси. Це про досвід, емоцію й очікування користувача. Це те, що може перетворити сухий інтерфейс на живу систему, яка реагує, підказує й веде.
На цей досвід напряму впливаємо ми — розробники. Наша задача — зробити цей досвід максимально ефективним, легким і приємним для користувача. Але якщо зробити анімації абияк, то ми отримаємо перевантажений сайт, який зависає на кожному кліку.
У цій статті ми розберемося як розробнику не злетіти з котушок між ease-in, spring, GSAP і requestAnimationFrame? Коли краще залишити все на CSS, а коли вже без JavaScript ніяк не впоратись? А якщо ви у React, то може краще Framer Motion?
Я хочу зробити цю статтю не просто розбором інструментів, а спробою розібратись, як мислити про анімації як інженер і дизайнер одночасно. З прикладами, порівняннями й особистим досвідом боїв із «трясками», «дропами FPS» і «навіщо воно взагалі рухається?».
CSS-АНІМАЦІЇ: ШВИДКО Й ЕФЕКТИВНО
CSS-анімації — це основа, з якої починається шлях більшості фронтенд-розробників. І не дарма: іноді кілька рядків CSS можуть дати відчуття живого інтерфейсу без жодного рядка на JavaScript. Вони особливо корисні там, де потрібні прості, але чіткі ефекти. Підсвічування кнопок при наведенні, плавне зникнення або поява елементів, зміна кольору чи масштабу — це все можна реалізувати буквально «з коробки» і без додаткових бібліотек, та ще й достатньо просто.
Хороший приклад: уявіть форму з кнопкою «Надіслати», яка змінює колір і масштаб при наведенні. Без жодного JS, без логіки — просто ефект, який підказує користувачу, що кнопка активна. Візуальний фідбек — це маленький UX-трюк, який створює враження турботи.
Переваги CSS-анімацій:
- Швидкість і продуктивність: трансформації типу transform та opacity апаратно прискорюються і практично не впливають на продуктивність навіть на слабких пристроях.
- Простота використання: не потрібно підключати бібліотеки, налаштовувати складні залежності чи писати логіку.
- Хороша сумісність: CSS-анімації працюють у більшості браузерів і поводять себе навіть при поганому інтернеті.
- Ідеально для старту: легко протестувати, швидко змінити, зручно дебажити у DevTools.
Та варто розуміти й обмеження:
- Відсутність логіки: ви не можете умовно змінювати параметри у процесі (наприклад, змінювати напрямок анімації залежно від кліку).
- Обмежена інтерактивність: CSS не знає, що користувач клікнув або щось ввів, він просто виконує анімацію.
- Обмеження на складні сценарії: зробити синхронізовані анімації або зупинку на середині шляху без JS — складно або неможливо.
Простіше кажучи, CSS — це як автомат: він стріляє чітко, але тільки в напрямку, який ви вказали на старті. Як тільки ви хочете динамічності, умов, взаємодії з користувачем — доведеться шукати інші інструменти.
Приклад CSS анімації спінера
<div class="spinner"></div>
.spinner {
width: 60px;
height: 60px;
border: 6px solid #ddd;
border-top-color: #4CAF50;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Пояснення: простий, апаратно-прискорений ефект, який дає візуальний фідбек без JS.
JAVASCRIPT-АНІМАЦІЇ: СКЛАДНІСТЬ І ГНУЧКІСТЬ
JavaScript дає набагато більше свободи й можливостей. Ми б навіть сказали, що він відкриває для розробників майже безкрайні можливості для створення анімацій і загалом чогось інтерактивного.
Через JS легко реалізовувати умовні анімації, як, наприклад: запускати анімацію тільки тоді, коли якийсь конкретний блок стає видимим; або змінювати анімацію залежно від того, як користувач взаємодіє з елементом на сторінці.
Окрім цього всього, JavaScript — це чи не єдиний спосіб створення анімацій, які можуть синхронізуватися з іншими частинами сайту: анімована зміна даних, графіків на дашбордах тощо.
Але важливо не забувати, що код, який написаний неправильно, може негативно впливати на продуктивність сайту.
Які є переваги JavaScript-анімацій:
- Висока гнучкість: можливість створювати складні й умовні сценарії, контролюючи стан і послідовність потрібних (або всіх) анімацій.
- Контроль за подіями: анімації можуть бути прив’язані до конкретних дій користувача (користувач клікнув на елемент, або прийшли дані з сервера).
- Можливість створення таймлайнів для анімацій: це + створення стану й логіки практично неможливо створити в CSS.
Недоліки, звісно, теж є:
- Дуже очевидно — потрібно думати про продуктивність. Часто анімації «підвисають», і це стається не тому, що вони погано написані, а тому, що вони можуть запускатися занадто часто. Але цього можна уникнути за допомогою:
throttle: обмежує частоту запуску функції (наприклад, раз на 100 мс);
debounce: чекає поки користувач завершить дію (введення тексту тощо), і тільки після цього запускає обробку;
requestAnimationFrame — метод браузера, який запускає анімацію тоді, коли сам браузер готовий «намалювати» новий кадр. З цієї ж причини анімації виглядають більш плавними.
- Заплутаний код. Якщо не структурувати код від початку, або не використовувати бібліотеки тоді, коли вони дійсно потрібні, то з часом в коді стане все важче і важче розбиратися.
Писати анімації на JS — це не про зробити гарніше чи просто зробити красиво. Це про зробити максимально розумно та зручно. Конкретно в цьому випадку сила в логіці, яка прихована серед рядків коду.
JavaScript-анімація з requestAnimationFrame
<div id="box" style="width:100px; height:100px; background:red; position:relative;"></div>
<script>
const box = document.getElementById('box');
let pos = 0;
function animate() {
pos += 1;
box.style.left = pos + 'px';
if (pos < 300) {
requestAnimationFrame(animate);
}
}
box.addEventListener('click', () => {
pos = 0;
animate();
});
</script>Пояснення: після кліку на блок він анімується вправо. requestAnimationFrame гарантує плавність.
ПОПУЛЯРНІ JAVASCRIPT-БІБЛІОТЕКИ ДЛЯ АНІМАЦІЙ
Окрім ванільного JS, ви, звісно, можете використовувати бібліотеки для написання анімацій. Чимало з них спрощує сам процес, додає складніші елементи й можливість зробити анімації більш плавними тощо.
Також бібліотеки допомагають скоротити час на розробку (коли ви вже в самих бібліотеках плюс-мінус розібралися, звісно); допомагають уникнути типових помилок, які часто трапляються у випадку написання анімацій без них. Тому в цьому розділі ми хочемо привідкрити вам світ JS бібліотек для написання анімацій.
GSAP (GreenSock Animation Platform)
Ця бібліотека — це щось типу After Effects, але для вебу. Тобто ми маємо великі можливості і такий само величезний функціонал: можемо створювати таймлайни, складні послідовності й ланцюжки анімацій, можемо маніпулювати SVG, Canvas і навіть WebGL. Далі трохи про переваги й недоліки цієї біблотеки.
Переваги: потужність, плавність, простота синтаксису, неймовірна гнучкість, класна документація, можливість керувати анімаціями до мілісекунд.
Недоліки: важча за інші рішення (розмір бібліотеки більший), що може негативно вплинути на завантаження сторінки, для комерційних проєктів платна.
Anime.js
Серед бібліотек — найбільш універсальна і проста, як на мене. Хочете простий синтаксис і доволі широкий спектр можливостей: анімувати CSS-властивості, DOM-елементи, атрибути, властивості обʼєктів і SVG — вам сюди.
Переваги: легка вага, простий API, підтримка роботи з CSS, SVG і DOM, також є підтримка таймлайнів.
Недоліки: менше готових складних сценаріїв порівняно з GSAP, ну і менший масштаб (не підійде для великих проєктів. Але чудово підійде для невеликих, або якихось окремих елементів інтерфейсу, де потрібні плавні, гарні анімації).
Framer Motion (для React)
А це вже не просто бібліотека, а цілий анімаційний фреймворк, який був створений спеціально для React. Тут хочу трохи заглибитися.
Framer Motion не просто дозволяє анімувати вхід і вихід компонентів, а й працює з React state, і саме ця деталь робить анімації передбачуваними й декларативними. Декларативність полягає в тому, що ви не просто описуєте як має змінюватися елемент, а що саме з ним має статись у певному стані.
Крім цього, Framer Motion працює в контексті React-подій і це дозволяє будувати складні взаємодії (анімація між роутами тощо). Що таке роутинг і як він працює ви можете почитати в нашій попередній статті. Така інтеграція з React дозволяє створювати ефекти, які можна запросто вплітати в життєвий цикл компонентів.
Рекомендуємо публікацію по темі
Переваги: нативна підтримка React, простий API, який легко читається, зручна і гнучка інтеграція з useState і useEffect.
Недоліки: обмеження використання лише з React-проєктами й має більший розмір, ніж CSS-альтернативи.
Framer Motion: анімація входу кнопки
import { motion } from "framer-motion";
export default function AnimatedButton() {
return (
<motion.button
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.3 }}
style={{
background: "#4CAF50",
color: "white",
padding: "10px 16px",
border: "none",
cursor: "pointer",
}}
>
Надіслати
</motion.button>
);
}Пояснення: декларативна анімація на появу й ховер. Інтеграція з React state працює «з коробки».
ІНСТРУМЕНТИ ДЛЯ ДІАГНОСТИКИ Й ОПТИМІЗАЦІЇ
Анімації мають бути не лише гарними, але й легкими. Важливий аспект будь-якої анімації — продуктивність. Якщо сайт «фризить» через анімацію, то з продуктивністю не все гаразд. Для перевірки плавності й оптимізації ви можете використати:
- Chrome DevTools, вкладка Performance: детальний аналіз завантаження і рендерингу. Переглядайте, як працює layout, стилізація тощо. Тут можна побачити, які саме анімації зʼїдають продуктивність.
- Lighthouse: автоматичні поради для покращення швидкості роботи сайту. Допомагає зрозуміти, чи гальмує анімація перший рендер. Якщо так, або є непомітні затримки в завантаженні — дає поради як то виправити.
- CSS Triggers: ресурс для перевірки, які CSS-властивості впливають на продуктивність.
- FPS Meter (для Chrome та Safari): це лічильник кадрів, можна перевірити, чи тримається ваш сайт в межах 60 FPS. Якщо просідає до 30 — то це вже точно треба виправляти.
ВИСНОВОК
Ми хотіли донести, що анімації — це не просто ефекти заради ефектів, а інструмент для набуття класного користувацького досвіду, користувацьких емоцій і бажання користувача користуватися ресурсом.
Усі ж ми хочемо, щоб наші вебсайти працювали як треба, а не смикалися, дратували чи відволікали. У такому разі анімації — це той самий інструмент, який буде гідом по сайту. Гідом, який обережно, але гарно, веде, підказує, підсвічує і допомагає користувачу зрозуміти, як правильно взаємодіяти з нашим сайтом.
Нікому насправді не потрібні анімації, які просто рухаються, цей етап розвитку вебу ми вже пройшли. Нам потрібні анімації, які працюють. Для того, щоб впевнитися в цьому, вище є список ресурсів, де це можна перевірити:)
Наша порада — експериментуйте, пробуйте і робіть. Як то кажуть, очі бояться, а руки роблять! Памʼятайте, що найкраща анімація — це часто та, яку навіть не помічають, але вона «веде і показує», настільки вона природна. Але якщо вона помітна, то нехай за це не буде соромно.
А ми з вами, як завжди, зустрінемося в цей самий час і в цьому самому місці!
