«Библиотека анимации» — это не одна категория инструментов, а сразу три, и путаница между ними стоит проектам лишних килобайт. Первая — наборы готовых эффектов: подключил файл, повесил класс, элемент прыгнул. Вторая — генераторы, которые вообще не становятся зависимостью: сервис отдаёт готовые @keyframes, они уезжают в твой собственный CSS. Третья — движки, которые считают анимацию в рантайме и дают то, чего у CSS нет: таймлайны, синхронизацию десятка элементов, перемотку, реверс, реакцию на перетаскивание.
Подборки на эту тему стареют быстрее самих библиотек. В списках рекомендаций до сих пор висит скрипт, который не получал коммитов седьмой год, и библиотека пружин, чей автор давно перенёс идеи в другой проект под другим именем. Поэтому по каждому пункту здесь есть две скучные, но решающие строки: сколько весит и когда его последний раз трогали.
Ниже десять инструментов, которые стоит держать в закладках, дальше — три библиотеки, которые попадают в такие подборки по недоразумению, раздел про то, что уже пора выкинуть из проекта, и раздел про случаи, когда библиотека не нужна вообще: половину сценариев из старых списков браузер теперь закрывает сам. В конце — голосовалка, любопытно, что в итоге прижилось у тебя.
Как выбирать, чтобы потом не выпиливать
Три вопроса, которые экономят день работы:
- Сколько это весит после gzip? Минифицированный размер обманывает: CSS-наборы жмутся в десять раз, JS — втрое. Ниже указаны оба числа.
- Библиотека жива? Для CSS-наборов почти не важно: @keyframes не «портятся» от простоя. Для JS-движков критично: браузеры меняются, а фиксить некому.
- Что будет у человека с включённым «уменьшить движение»? Часть библиотек глушит анимации сама, часть — нет, и тогда это твоя работа.
Первые три инструмента — готовые наборы эффектов на классах: самый быстрый способ получить движение, не написав ни строчки анимации.
Animate.css
Самый популярный набор в подборке — больше восьмидесяти двух тысяч звёзд, и по факту отраслевой стандарт для «просто оживить элемент». Внутри несколько десятков готовых @keyframes: появления, затухания, тряски, подпрыгивания, вылеты за границы экрана. Всё подключается двумя классами: базовым и именем эффекта.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4/animate.min.css">
<div class="notice animate__animated animate__fadeInDown">
Заявка отправлена
</div>Скорость и задержку не надо переопределять через !important — в четвёртой версии всё крутится CSS-переменными, локально на элементе или глобально на :root:
.notice {
--animate-duration: 0.45s;
--animate-delay: 0.1s;
--animate-repeat: 2;
}Приятная деталь, которой нет у большинства соседей по списку: библиотека сама уважает системную настройку «уменьшить движение» — при prefers-reduced-motion: reduce и при печати длительность схлопывается до одной миллисекунды. Весит вся сборка 70 КБ, но после gzip — всего 5 КБ, а на сайте есть конструктор кастомной сборки: собрать три нужных эффекта вместо всех.
Что стоит знать: последний релиз — 4.1.1, репозиторий трогали весной 2024-го. Для набора готовых кейфреймов это не проблема, ломаться в нём нечему.
Magic CSS
Тот же принцип — класс на элемент — но эффекты заметно наглее: перспектива, развороты в трёхмерном пространстве, схлопывание в точку, эффект «дыма». Если Animate.css — про аккуратные появления в интерфейсе, то Magic — про переходы между экранами и акценты, которые нельзя не заметить. Базовый класс тут magictime, к нему добавляется имя эффекта.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magic.css/dist/magic.min.css">
<div class="card magictime puffIn">Готово</div>Библиотека маленькая: 33 КБ, после gzip — 2,4 КБ, и это самый дешёвый способ получить эффектный переход. Лицензия MIT, зависимостей нет.
Важный нюанс, про который в описаниях обычно молчат: встроенной поддержки «уменьшить движение» здесь нет. Разворот карточки в трёх измерениях — ровно тот тип движения, от которого человеку с вестибулярными нарушениями становится физически плохо, так что защиту дописываем руками — это три строки:
@media (prefers-reduced-motion: reduce) {
.magictime { animation: none; }
}Последний коммит — июль 2022-го, версия 1.4.8. Как и в случае с Animate.css, для чистого CSS без единой строчки скрипта это скорее «заморожено», чем «заброшено».
AnimXYZ
Принципиально другая идея: эффект не выбирается из списка, а собирается из утилит-слов в атрибуте. Не «найди подходящее имя среди пятидесяти», а «опиши, что должно произойти»: появление с затуханием, снизу, крупное — это xyz="fade up big". Комбинации не надо заранее предусматривать, они складываются сами.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">
<ul class="xyz-in" xyz="fade up stagger duration-10">
<li class="xyz-nested">Первый пункт</li>
<li class="xyz-nested">Второй пункт</li>
<li class="xyz-nested">Третий пункт</li>
</ul>Классы xyz-in и xyz-out включают анимацию в нужную сторону, xyz-nested подхватывает её у детей, а утилита stagger сама разносит их по времени — тот самый каскадный выход списка, за которым обычно тянут JS-движок. Под капотом — CSS-переменные вида --xyz-translate-y и --xyz-duration, так что любую утилиту можно переопределить точечно. Исходники на SCSS, есть отдельные пакеты для Vue и React.
Ядро весит 96 КБ, после gzip — 12 КБ: дороже готовых наборов, но это плата за комбинаторику. Лицензия MIT, пакеты обновлялись летом — из трёх CSS-инструментов подборки это самый живой.
Следующие два пункта не становятся зависимостью вообще. Это генераторы: ты забираешь готовый CSS и уходишь, в package.json не появляется ни строчки.
Animista
Витрина эффектов, где по каждому можно покрутить параметры, посмотреть результат и забрать сгенерированный код. Библиотеку никуда подключать не нужно: на выходе — обычный @keyframes с классом, который вставляется в твой собственный файл стилей.
Эффекты разложены по группам: появления и уходы, вращения, тряски, отдельные наборы для текста (посимвольные и построчные) и для фона. Код отдаётся в двух вариантах — читаемом и минифицированном, с вендорными префиксами или без.
Плюс арифметический: подключая набор классов, ты отдаёшь пользователю все эффекты, включая те, которых на сайте нет, а через генератор в бандл уезжают ровно нужные кейфреймы — обычно меньше килобайта. И код твой: переименовать, поправить, не следить за обновлениями. Минус один — ручная работа: для трёх эффектов идеально, для двадцати проще взять готовый набор.
Loading.io
Такой же генератор, но заточенный под одну задачу — индикаторы ожидания. Спиннеры, точки, полоски прогресса, пульсирующие фигуры: выбираешь, настраиваешь цвета, размер и скорость, забираешь результат. Форматов на выходе много: CSS с кейфреймами, SVG, GIF, APNG, PNG-спрайт и Lottie — то есть одну и ту же анимацию можно унести и в вёрстку, и в мобильное приложение, и в презентацию.
Два предупреждения. Часть контента бесплатная, часть премиальная, и лицензии у наборов разные — от CC0 до CC BY с обязательной ссылкой на автора; проверять нужно на странице конкретного лоадера. И второе: простой спиннер — это шесть строк CSS с border-radius и вращением. Сервис оправдан под нетиповой индикатор или когда один лоадер нужен сразу в нескольких форматах.
Дальше — два инструмента под конкретные сценарии: появление при скролле и галерея с лайтбоксом.
AOS (Animate On Scroll)
Классика жанра «блоки выезжают, пока листаешь». Ставится скриптом, инициализируется одной строкой, дальше всё делается атрибутами прямо в разметке — и это до сих пор один из самых аккуратных API в подборке.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2/dist/aos.css">
<script src="https://cdn.jsdelivr.net/npm/aos@2/dist/aos.js"></script>
<section data-aos="fade-up" data-aos-duration="600" data-aos-delay="100">
Блок появится при прокрутке
</section>
<script>AOS.init({ once: true });</script>Двадцать восемь тысяч звёзд, 14 КБ скрипта, MIT — и последний коммит в октябре 2018 года. Библиотека так и осталась в статусе 3.0.0-beta.6, седьмой год. Работать она при этом не перестала, но за появление блоков теперь платить скриптом уже не обязательно: у CSS есть анимации, привязанные не ко времени, а к позиции скролла.
.card {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 20% cover 45%;
}
@keyframes reveal {
from { opacity: 0; transform: translateY(2rem); }
to { opacity: 1; transform: none; }
}Ни одной строчки JavaScript, анимация считается вне основного потока и честно отматывается назад, если пользователь листает вверх. Есть одно но — и оно решающее при выборе:
В Firefox привязки к скроллу нет до сих пор — фича лежит в предварительных сборках. Так что выбор честный: нативный CSS с плавной деградацией (в Firefox блок просто окажется на месте без анимации) или скрипт, который работает всюду одинаково — AOS либо свои двадцать строк на IntersectionObserver.
Ниже - демо анимации карточек, выезжающих при прокрутке на чистом CSS через animation-timeline: view(), с фолбэком для Firefox через @supports
lightGallery
Единственный пункт списка, который не «библиотека анимаций», а готовый компонент интерфейса: галерея с лайтбоксом. Анимации здесь — часть продукта, а не набор, из которого собираешь своё. Клик по превью открывает картинку на весь экран с зумом, свайпами, стрелками и лентой миниатюр.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2/css/lightgallery-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2/lightgallery.min.js"></script>
<div id="gallery">
<a href="/img/kyiv-large.jpg" data-lg-size="1600-2400">
<img src="/img/kyiv-thumb.jpg" alt="Вид на город с высоты" />
</a>
</div>
<script>
lightGallery(document.getElementById('gallery'), { speed: 400 });
</script>Архитектура плагинная: зум, полный экран, миниатюры, поворот и видео (включая внешние плееры) подключаются отдельными модулями, в бандл попадает только включённое. Есть официальные обёртки для React, Vue и Angular; версия 2.9 вышла осенью, репозиторий активный.
А теперь то, что важнее всех фич и о чём в подборках молчат: лицензия двойная. Для открытых проектов — GPLv3, то есть твой код тоже обязан быть под совместимой лицензией. Для коммерческого сайта, темы на продажу или закрытого приложения нужна платная коммерческая лицензия. Это не «бесплатно с оговорками», а юридическое условие, и узнавать о нём лучше до релиза.
Дальше — три JS-движка. Их берут не за готовые эффекты, а за контроль: последовательности, синхронизация, перемотка, реверс, реакция на действия пользователя.
GSAP
Профессиональный движок, на котором сделана большая часть тех сайтов, где хочется спросить «как это вообще устроено». Единица работы — твин: «доведи такие-то свойства до такого-то значения за такое-то время». Твины складываются в таймлайны, таймлайны вкладываются друг в друга, и всё это можно ставить на паузу, отматывать и проигрывать со скоростью 0,5×.
const tl = gsap.timeline({ defaults: { duration: 0.6, ease: 'power2.out' } });
tl.from('.card', { y: 40, opacity: 0, stagger: 0.08 })
.to('.badge', { scale: 1.2, yoyo: true, repeat: 1 }, '-=0.2')
.to('.hint', { autoAlpha: 1 });
// таймлайном можно управлять как видео
document.querySelector('.replay')
.addEventListener('click', () => tl.restart());Отдельно стоит проговорить то, о чём старые статьи не знают. Раньше половина силы GSAP жила в платных клубных плагинах: разбивка текста по буквам, морфинг SVG-путей, инерционный скролл. После перехода проекта под крыло Webflow с версией 3.13 бесплатным стало всё — включая коммерческое использование и бонусные плагины. SplitText при этом переписали: он стал вдвое компактнее и перестал ломать чтение скринридерами, а при разбивке текста на буквы это была реальная проблема доступности.
Ядро — 71 КБ, после gzip 28 КБ, плагины подключаются по одному. Самый тяжёлый инструмент списка: он окупается на сложной сцене, а не на появлении карточек.
На демо ниже можно увидеть таймлайн из трёх шагов с кнопками play / pause / reverse и ползунком скорости, видно, как последовательность управляется как видео
anime.js
По звёздам на GitHub — больше семидесяти двух тысяч — самый популярный движок подборки, и самый приятный для начала: одна функция, объект с параметрами, работает с DOM, SVG, атрибутами и обычными JS-объектами. Тут нужно быть внимательным, потому что почти все туториалы в сети описывают старую версию: библиотеку переписали с нуля, и вместо единственной функции anime() появился набор именованных модулей.
import { animate, stagger } from 'https://cdn.jsdelivr.net/npm/animejs@4/+esm';
animate('.dot', {
scale: [1, 1.6, 1],
rotate: '1turn',
duration: 900,
delay: stagger(60), // каскад по элементам
loop: true,
});Кроме animate в четвёртой версии есть createTimeline для последовательностей, createTimer для тактов без анимации, createDraggable для перетаскивания и onScroll для привязки к прокрутке. Работа с SVG и текстом вынесена в отдельные точки входа (animejs/svg, animejs/text) — в бандл попадает только то, что импортировал. Полная сборка на все случаи — 82 КБ и 28 КБ после gzip, но модульность позволяет унести куда меньше.
Лицензия MIT, релизы выходят регулярно. Если код с третьей версии не заводится — дело не в тебе: API поменялся, старые примеры несовместимы.
Motion
Тот инструмент, которого нет в старых подборках, хотя именно он там нужен: подборки до сих пор советуют физическую библиотеку Popmotion, а её разработка остановилась ещё летом 2022-го. Её автор никуда не пропал — он развивал те же идеи внутри Framer Motion, которая в 2024 году отделилась в самостоятельный проект под именем Motion. Так что если в статье встретился совет «возьми Popmotion для пружин и инерции», читать его нужно как «возьми Motion».
Ключевое отличие от GSAP и anime.js — опора на встроенный в браузер Web Animations API: движок отдаёт анимацию браузеру, а тот считает её вне основного потока, поэтому тяжёлый JavaScript на странице её не дёргает.
import { animate, spring } from 'https://cdn.jsdelivr.net/npm/motion@13/+esm';
animate('.panel',
{ x: 240, rotate: 8 },
{ type: spring, stiffness: 300, damping: 20 }
);Пакет разложен на части: полная сборка — 137 КБ (45 КБ после gzip), но есть точка входа motion/mini, где функция анимации весит около 2,3 КБ — целиком нативная, без своего цикла отрисовки. Для React — отдельная сборка motion/react с компонентами и хуками. MIT, тридцать три тысячи звёзд, релизы каждые несколько недель.
Заодно стоит понимать, что тот самый Web Animations API доступен и без библиотек — для простой анимации с управлением из кода библиотека не нужна:
Не про интерфейс: Three.js, p5.js и Phaser
Эти три имени регулярно попадают в подборки библиотек анимации, и это сбивает с толку: они решают другую задачу. anime.js двигает существующие элементы страницы, а здесь ты сначала создаёшь сцену, а потом рисуешь каждый кадр. Анимация тут — следствие рендера, а не отдельная функция. Инструменты отличные, но выбирать между ними и Motion бессмысленно — это разные жанры.
Three.js
Стандарт трёхмерной графики в браузере: сто пятнадцать тысяч звёзд, обёртка над WebGL, готовые камеры, свет, материалы, загрузчики моделей. Почти всё, что выглядит как интерактивная 3D-сцена на сайте, сделано на нём. Расплата — вес: одно ядро около 350 КБ минифицированного кода, так что заходит оно через ленивую загрузку, а не в общий бандл. MIT, релизы примерно раз в месяц.
p5.js
Творческий код: генеративная графика, визуализации, учебные наброски. Порог входа самый низкий в разделе — пишешь setup и draw, вторая вызывается шестьдесят раз в секунду. Весной 2025-го вышла вторая мажорная версия с переписанным ядром, часть старого API поменялась — учебники под первую версию местами расходятся с реальностью.
Phaser
Движок для двумерных игр: физика, коллизии, спрайтовые атласы, тайловые карты, ввод, звук, сцены. Анимация здесь — кадры спрайта и твины внутри игрового цикла. Весной вышла четвёртая мажорная версия с переписанным рендером, так что у чужого туториала стоит сверять версию.
Что уже не стоит подключать
Инструменты, которые продолжают жить в подборках, хотя их время прошло. Ни один из них не «сломался» — просто у каждого есть более живая замена.
- Velocity.js — когда-то самый быстрый способ ускорить анимацию jQuery. Последний коммит — август 2020-го, а всё, за что её брали, теперь умеет Web Animations API.
- Popmotion — пружины, инерция, физически правдоподобное движение. Остановилась на версии 11.0.5 в августе 2022-го, новых релизов с тех пор не было. Замена — Motion от того же автора.
- Mo.js — motion-графика со своими фигурами и всплесками. Живёт еле-еле: последний релиз — осень 2023-го. Те же эффекты собираются на GSAP или anime.js, где сообщество на порядок больше.
- EaselJS и остальной CreateJS — наследие эпохи Flash, слой удобства над <canvas>. Версия 1.0.0 датирована 2017-м. Под canvas берут p5.js, под игры — Phaser.
- Micron — микровзаимодействия по клику через атрибут data-micron. Идея хорошая, но последний коммит — май 2018-го, а нажатие кнопки прекрасно анимируется парой строк на :active и transition.
- Animation Library — альтернатива Animate.css, где эффекты разложены по отдельным файлам. Сто с небольшим звёзд, лицензия GPL-3.0, ни одной настройки длительности или задержки. Тот же результат даёт Animate.css с кастомной сборкой.
- Skeleton Elements — готовые скелетоны-заглушки на время загрузки. Аккуратная библиотека, но полторы сотни звёзд, последний релиз — осень 2022-го, а эффект — это градиент и одни кейфреймы: писать своё дешевле, чем следить за чужой зависимостью.
/* скелетон целиком: градиент, который едет по блоку */
.skeleton {
background: linear-gradient(90deg, #e9e9ee 25%, #f6f6f9 50%, #e9e9ee 75%);
background-size: 220% 100%;
animation: skeleton-slide 1.2s linear infinite;
}
@keyframes skeleton-slide {
from { background-position: 220% 0; }
to { background-position: -220% 0; }
}Когда библиотека не нужна вообще
Половина сценариев из старых подборок сегодня закрывается браузером, и проверить это стоит до того, как ставить зависимость: разница между «подключил 28 КБ движка» и «написал шесть строк CSS» видна в метриках загрузки.
Прогресс и появление по скроллу
Индикатор прочитанного, параллакс, выезжающие блоки — раньше всё это требовало обработчика скролла и тормозило вместе с ним. Теперь анимация привязывается не ко времени, а к прокрутке: animation-timeline: scroll() следит за прогрессом контейнера, animation-timeline: view() — за появлением элемента в области видимости. Виджет поддержки — выше, в блоке про AOS.
.reading-progress {
position: fixed;
inset-block-start: 0;
inline-size: 100%;
block-size: 4px;
transform-origin: 0 50%;
animation: fill-line linear both;
animation-timeline: scroll(root block);
}
@keyframes fill-line {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}Появление элемента, которого только что не было
Анимировать появление всегда было неудобно: transition нечего анимировать, если элемент только что вставили в DOM — отсюда и брались наборы с классами вида fadeInDown. Правило @starting-style задаёт состояние, из которого элемент стартует при первой отрисовке.
.toast {
opacity: 1;
translate: 0 0;
transition: opacity 0.25s, translate 0.25s, display 0.25s allow-discrete;
}
/* состояние на момент появления */
@starting-style {
.toast {
opacity: 0;
translate: 0 1rem;
}
}Переход между состояниями и страницами
Переходы между экранами — та задача, под которую обычно советуют наборы вроде Magic CSS. View Transitions решает её иначе: браузер сам снимает состояние «до» и «после» и анимирует разницу, а общие элементы честно переезжают из точки в точку.
/* переходы между страницами одного сайта, без единой строчки JS */
@view-transition {
navigation: auto;
}
/* общий элемент, который должен «переехать», а не исчезнуть и появиться */
.card-hero {
view-transition-name: hero;
}Последним из основных браузеров переходы подхватил Firefox — так что теперь это рабочий инструмент, а не эксперимент под флагом.
Анимация, которая никому не мешает
Два правила, которые важнее выбора библиотеки. Первое — про людей: для части пользователей движение на экране означает тошноту и головокружение, и они выставляют в системе «уменьшить движение». Анимация обязана это уважать, и сами библиотеки помогают неравномерно: Animate.css глушит эффекты автоматически, у GSAP для этого есть gsap.matchMedia(), но написать условие всё равно нужно руками, а у большинства наборов классов нет и этого. Как это устроено, подробно разобрано в статье про медиа-запрос prefers-reduced-motion.
Второе правило — про плавность. Анимировать стоит transform и opacity: их браузер отдаёт композитору мимо пересчёта раскладки. Анимация width, height, top или margin пересчитывает геометрию страницы на каждом кадре — отсюда рывки на слабых устройствах, и библиотека тут не помогает: GSAP с анимацией height дёргается так же, как самописный код. Свойство will-change помогает, но легко применяется себе во вред — про это есть отдельный разбор.
Если базовая механика CSS-анимаций еще не усвоена, начать стоит с разбора @keyframes и свойств animation — половина библиотек из списка после этого перестаёт быть нужной.
Что под какую задачу
| Задача | Чем закрывать | Почему |
| Пара эффектов на лендинге | Animista | В бандл уезжает меньше килобайта, зависимости нет |
| Типовые эффекты по всему сайту | Animate.css | 5 КБ после gzip, глушится при reduced-motion сам |
| Яркие переходы между экранами | Magic CSS, View Transitions | Самый дешёвый эффект и нативная альтернатива |
| Свои комбинации эффектов, Vue или React | AnimXYZ | Эффект собирается из утилит, а не выбирается из списка |
| Появление блоков при прокрутке | CSS animation-timeline, AOS | Нативно без скрипта; AOS — если нужен Firefox |
| Индикатор загрузки | Loading.io или свои кейфреймы | Сервис — под нетиповой лоадер и разные форматы |
| Заглушки на время загрузки | Свой CSS-градиент | Один @keyframes вместо зависимости |
| Галерея с лайтбоксом | lightGallery | Готовый компонент; проверить лицензию до релиза |
| Сложная сцена с таймлайном | GSAP | Плагины стали бесплатными, включая коммерческое использование |
| Анимация DOM, SVG и чисел из кода | anime.js | Модульный импорт, низкий порог входа |
| Пружины, инерция, React | Motion | Опирается на Web Animations API, мини-версия от 2,3 КБ |
| Управляемая анимация без зависимостей | Web Animations API | Пауза, реверс и скорость есть в браузере из коробки |
С чего начать
Порядок действий такой. Сначала проверь, не закрывает ли задачу сам браузер: появление, прогресс по скроллу, переход между экранами и управляемая из кода анимация теперь нативные. Нужны готовые эффекты — начни с генератора, переходи на набор классов, когда эффектов станет больше десятка. И только под сцену, где элементы двигаются по расписанию и слушают пользователя, подключай движок: GSAP — за таймлайны и плагины, anime.js — за простой вход, Motion — за нативную основу и React.
Что бы ты ни выбрал, проверь две вещи перед релизом: анимации глохнут при включённом «уменьшить движение» и двигаются только transform с opacity. Это дешевле любой оптимизации потом. А если анимировать нужно векторную графику, посмотри заодно онлайн-редакторы SVG — часть из них отдаёт готовую анимацию без единой библиотеки.
Комментарии (0)