ВСТУП
Возможно, вы ещё помните те статические сайты, которые больше смахивали на учебник, а не на вебресурс, которым мы его представляем сейчас. Одним из многих важных поинтов разницы между ними есть анимация. Анимации — это не просто когда «что-то крутится» на странице для красоты. Это об опыте, эмоции и ожиданиях пользователя. Это то, что может превратить сухой интерфейс в живую реагирующую, подсказывающую и ведущую систему.
На этот опыт напрямую влияем мы разработчики. Наша задача — сделать этот опыт максимально эффективным, лёгким и приятным для пользователя. Но если сделать анимации кое-как, то мы получим перегруженный сайт, зависающий на каждом клике.
В этой статье мы разберёмся как разработчику не слететь с катушек между 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, и именно эта деталь делает анимацию предсказуемой и декларативной. Декларативность состоит в том, что вы не просто опишите, как должен измениться элемент, но и то, что именно должно с ним случиться.
Кроме того, 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-Complexity влияет на производительность.
- FPS Meter (для Chrome та Safari): это счётчик кадров, вы можете проверить, держится ли ваш сайт в рамках 60 кадров в секунду. Если он проседает до 30 — то это точно необходимо исправить.
ВЫВОД
Мы хотели передать, что анимации — это не просто эффекты ради эффектов, но и инструмент для получения полезного пользовательского опыта, эмоций пользователей и желания пользователя использовать ресурс.
Мы все хотим, чтобы наши веб-сайты работали должным образом, не сбои, не дёргались. раздражали и не отвлекали. В этом случае анимация — тот же инструмент, который будет гидом на сайте. Гидом, который осторожно, но хорошо, ведёт, предлагает, освещает и помогает пользователю понять, как взаимодействовать с нашим сайтом.
Никто не нуждается в анимациях, которые просто двигаютя, мы уже прошли этот этап веб-разработки. Нам нужны анимации, которые работают. Чтобы убедиться в этом, есть список ресурсов, где вы можете проверить:)
Наш совет — экспериментируйте, попробуйте сделать. Как говорится, глаза боятся, и их руки делают! Помните, что лучшая анимация часто — та, которую вы даже не замечаете, но она «ведёт и показывает» настолько естественна. Но если это заметно, то пусть будет не стыдно.
И мы, как всегда, встретимся в это самое время и в этом самом месте!
