Как выбирать: три вопроса перед установкой
Прежде чем смотреть на конкретные библиотеки, ответь на три вопроса:
Кто создаёт анимацию? Если дизайнер — ему нужен Rive или LottieFiles с визуальным редактором. Если разработчик или AI пишет код — Motion, GSAP или TailwindCSS Motion.
Насколько сложна интерактивность? Простой fade при появлении элемента — CSS или TailwindCSS Motion. Кнопка с тремя состояниями и переходами между ними — Rive. Скролл-таймлайн с pinning — GSAP ScrollTrigger.
Насколько важна производительность? Тяжёлые библиотеки на мобильном трафике убивают Core Web Vitals. GSAP весит ~68 КБ минифицированного JS, Motion при использовании LazyMotion — от ~18 КБ, TailwindCSS Motion — ~0 КБ JS (чистый CSS).
Бесплатные библиотеки
Motion (бывший Framer Motion)
Что это. Самая популярная анимационная библиотека для React: 30,7k звёзд на GitHub, 3,6 млн скачиваний в неделю. В конце 2024 года Framer Motion переименовали в Motion и добавили нативную поддержку Vue. Используется Figma, Framer, Vercel.
Когда брать. React-проект с микровзаимодействиями, переходами между экранами, жестами, scroll-анимациями. Если AI генерирует код для React-сайта — Motion будет выбором по умолчанию и это оправдано.
Как подключить:
npm install framer-motion
Минимальный пример анимированного появления:
import { motion } from "motion/react"
export default function Card() {
return (
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Контент
)
}
Ограничение. Для простых анимаций — избыточен. Базовый import { motion } добавляет ~30 КБ в бандл. Используй LazyMotion чтобы грузить только нужные фичи.
Промпт для Codex / Claude Code:
Установи framer-motion. Оберни все карточки на странице /app/page.tsx
в motion.div с анимацией появления снизу: opacity 0→1, y 24→0, duration 0.4s.
Добавь staggerChildren 0.08s чтобы карточки появлялись по очереди.
Используй LazyMotion + domAnimation чтобы не раздувать бандл.
Цена. Бесплатно, MIT.
GSAP (GreenSock Animation Platform)
Что это. Профессиональный стандарт для сложных анимаций: скролл-эффекты, таймлайны, SVG-анимация, particle systems. 23,6k звёзд, 1,47 млн скачиваний в неделю.
Важный факт: в апреле 2025 года Webflow купил GreenSock и сделал GSAP полностью бесплатным включая коммерческое использование — все плагины, которые раньше стоили $199–$1999 в год (SplitText, MorphSVG, DrawSVG, ScrollTrigger, ScrollSmoother), теперь доступны без лицензии.
Когда брать. Сайт с параллакс-эффектами, pin-секциями при скролле, анимированными SVG-иллюстрациями, reveal-эффектами при появлении текста. Awwwards-уровень без платных плагинов.
Как подключить:
npm install gsap
Пример ScrollTrigger — текст появляется при скролле:
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
gsap.registerPlugin(ScrollTrigger)
gsap.from(".hero-title", {
opacity: 0,
y: 60,
duration: 1,
scrollTrigger: {
trigger: ".hero-title",
start: "top 80%",
}
})
Важно для React. Всегда используй useGSAP() хук вместо useEffect — автоматически очищает анимации при размонтировании компонента.
Ограничение. Единственный запрет в лицензии: нельзя строить визуальный редактор анимаций который конкурирует с Webflow. Для всего остального — свободно.
Промпт для Codex / Claude Code:
Установи gsap. На странице /app/about/page.tsx сделай секцию с текстом и изображением.
Добавь ScrollTrigger: заголовок появляется снизу когда доходит до 80% вьюпорта,
изображение — с противоположной стороны с небольшим parallax (y: -30 при скролле).
Используй useGSAP() хук для автоматической очистки при размонтировании.
Цена. Бесплатно полностью с апреля 2025.
TailwindCSS Motion
Что это. CSS-утилиты для анимации в Tailwind-проектах. Ноль JavaScript — всё через классы в разметке. Быстро растёт: с 3k звёзд в начале 2026 до 12k+ к июню.
Когда брать. Tailwind-проект где нужны простые анимации: появление элементов, hover-эффекты, пульсирование, вращение. Особенно хорош в связке с AI — Cursor и Claude Code отлично генерируют классы Tailwind Motion.
Как подключить:
npm install tailwindcss-motion
В tailwind.config.js:
plugins: [require('tailwindcss-motion')]
Пример — карточка появляется снизу:
Карточка
Ограничение. Нет физики, нет жестов, нет timeline. Только CSS-анимации — значит нет тонкого контроля над последовательностями.
Промпт для Codex / Claude Code:
Установи tailwindcss-motion и подключи плагин в tailwind.config.js.
На главной странице добавь анимации:
- hero-заголовок: motion-preset-fade-down motion-duration-700
- подзаголовок: то же самое, но с motion-delay-200
- кнопка CTA: motion-preset-bounce при hover
Не используй JS — только Tailwind-классы.
Цена. Бесплатно, MIT.
Anime.js
Что это. Лёгкий (~14 КБ) JavaScript-движок без зависимостей. Хорошо работает с CSS-свойствами, SVG, DOM-атрибутами. 66k звёзд — больше чем у Motion и GSAP вместе.
Когда брать. Проект не на React (Vue, Vanilla JS, Astro), нужна простая анимация конкретного элемента, хочется минимальный вес.
npm install animejs
Пример — анимированное появление списка:
import anime from "animejs"
anime({
targets: ".list-item",
opacity: [0, 1],
translateY: [20, 0],
delay: anime.stagger(80),
easing: "easeOutExpo",
duration: 600,
})
Промпт для Codex / Claude Code:
Установи animejs. На странице /src/pages/index.astro при загрузке
анимируй появление элементов списка .feature-item:
opacity 0→1, translateY 20→0, stagger 80ms между элементами,
easing easeOutExpo. Запусти анимацию через IntersectionObserver
когда секция попадает в видимую область.
Ограничение. Нет нативной поддержки scroll-анимаций (нужны обходные пути), нет физики, меньше готовых паттернов для React.
Цена. Бесплатно, MIT.
React Spring
Что это. Физика пружины вместо CSS-easing. Анимации выглядят органичнее при перетаскивании и жестах. 29k звёзд, 788k скачиваний в неделю.
Когда брать. Drag-and-drop, карточки которые отскакивают, данные в виде диаграмм с анимированным изменением.
npm install @react-spring/web
Промпт для Codex / Claude Code:
Установи @react-spring/web. Сделай компонент DraggableCard:
карточку можно перетаскивать, при отпускании она пружинисто
возвращается на место. Используй useDrag из @use-gesture/react
и useSpring для анимации x/y координат с config: { tension: 300, friction: 20 }.
Ограничение. Больший бандл чем Motion, сложнее для AI-генерации (нестандартный API).
Цена. Бесплатно, MIT.
Инструменты с визуальным редактором
Rive
Что это. Дизайн-инструмент + рантайм для интерактивных анимаций. Дизайнер рисует и анимирует в браузере, разработчик подключает .riv-файл. Используется в Spotify Wrapped, Duolingo, продуктах с 2 млрд пользователей.
Ключевая фича — State Machine: анимация управляется состояниями и условиями, не линейным таймлайном. Кнопка с hover, pressed, disabled — без единой строки кода анимационной логики.
Когда брать. Анимированные иконки с состояниями, онбординг-иллюстрации с интерактивностью, game-подобные UI-элементы, hero-секции с реакцией на курсор.
Как подключить в React:
npm install @rive-app/react-canvas
import { useRive } from "@rive-app/react-canvas"
export default function AnimatedButton() {
const { RiveComponent } = useRive({
src: "button.riv",
stateMachines: "ButtonSM",
autoplay: true,
})
return
}
Цена. Бесплатно для личных проектов (3 совместных файла). Cadet — $9/мес (безлимитные файлы + экспорт). Voyager — $32/мес.
Промпт для Codex / Claude Code:
Установи @rive-app/react-canvas. Создай компонент RiveHero который загружает
файл /public/hero.riv и подключает State Machine с именем "HeroSM".
Добавь обработчик: при наведении курсора на компонент триггерить булевый
инпут "isHovered" в State Machine через useStateMachineInput.
Размер компонента — 100% ширины контейнера, сохранять пропорции.
LottieFiles
Что это. Платформа для готовых Lottie-анимаций + визуальный редактор. Lottie — JSON-формат, разработанный Airbnb: векторные анимации из After Effects, маленький вес, работают везде. Библиотека LottieFiles содержит 800 000+ анимаций.
В 2026 добавили AI-фичи: Motion Copilot, Prompt to Vector, Prompt to State Machines. Figma-плагин позволяет экспортировать прототипные взаимодействия напрямую в .dotLottie.
Когда брать. Нужна готовая анимация быстро (загрузка, success-стейт, пустой список), нет дизайнера motion в команде, нужна кроссплатформенная анимация (web + iOS + Android одним файлом).
Как подключить:
npm install @lottiefiles/react-lottie-player
import { Player } from "@lottiefiles/react-lottie-player"
export default function LoadingState() {
return (
autoplay
loop
src="https://assets.lottiefiles.com/loading.json"
style={{ height: 120, width: 120 }}
/>
)
}
Ограничение. Lottie — линейные анимации, не интерактивные состояния. Для интерактивности нужен Rive. Бесплатная версия библиотеки ограничена, премиум-анимации требуют подписки.
Промпт для Codex / Claude Code:
Установи @lottiefiles/react-lottie-player. Создай три компонента:
LoadingSpinner (loop: true), SuccessCheck (loop: false, autoplay: false —
запускается программно при успехе формы) и EmptyState (loop: true).
Файлы анимаций лежат в /public/lottie/. Все три компонента должны принимать
size: number пропс для управления размером. Не использовать встроенный контрол.
Цена. Бесплатный доступ к части библиотеки. Индивидуальная подписка — $19,99/мес (годовая оплата). Команда — $24,99/пользователь/мес.
Как выбрать: быстрая шпаргалка
Tailwind-проект, простые переходы
→ TailwindCSS Motion (бесплатно, ноль JS)
React-проект, микровзаимодействия и жесты
→ Motion (бесплатно)
Скролл-эффекты, таймлайны, SVG-анимации
→ GSAP + ScrollTrigger (бесплатно полностью)
Анимированные иконки и компоненты с состояниями
→ Rive (бесплатно для личных проектов)
Нужна готовая анимация прямо сейчас (loader, success)
→ LottieFiles (бесплатная часть библиотеки)
Vue / Vanilla JS, минимальный вес
→ Anime.js (бесплатно)
Drag-and-drop с физикой отскока
→ React Spring (бесплатно)
Про Kombai
Kombai — это не анимационная библиотека, а инструмент для генерации кода из Figma-макетов. Он умеет преобразовывать статические компоненты в React/HTML/CSS-код, но анимации в его зоне ответственности нет. Правильнее воспринимать его как часть handoff-воркфлоу, а не как источник motion-решений.
Три ошибки которые AI делает чаще всего
Cursor и Claude Code знают синтаксис библиотек хорошо. Но есть три паттерна которые они воспроизводят неправильно — и это незаметно до тех пор пока не откроешь DevTools или не запустишь Lighthouse.
Анимирует top/left вместо transform. Анимация через top: 0 → top: 100px вызывает layout reflow на каждом кадре — браузер пересчитывает положение всех элементов. transform: translateY(100px) делает то же визуально, но работает на GPU и не трогает layout. Разница в производительности — в разы, особенно на мобильных. Если видишь в сгенерированном коде анимацию через top, left, width, height — замени на transform.
Забывает про prefers-reduced-motion. Часть пользователей отключает анимации в системных настройках — из-за вестибулярных расстройств, эпилепсии или просто предпочтений. AI-агенты редко добавляют эту проверку сами. Минимальный вариант который нужно добавлять в каждый проект с анимациями:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
В GSAP это закрывается одной строкой: gsap.matchMedia() с условием (prefers-reduced-motion: reduce). В Motion — пропс reduceMotion: "user" на уровне MotionConfig.
Стакает слишком много одновременных анимаций. AI охотно добавляет анимацию к каждому элементу страницы. Восемь карточек с разными stagger, плюс header, плюс фоновый parallax — браузер начинает дропать кадры. Правило: не больше 3–4 одновременно активных анимаций на экран. Остальные запускать только когда элемент попадает в вьюпорт через IntersectionObserver или ScrollTrigger.
Как библиотеки работают вместе
В реальных проектах редко используют одну библиотеку — чаще это комбинация под разные задачи на одном сайте.
TailwindCSS Motion + GSAP — самая распространённая пара для сайтов на Next.js. TailwindCSS Motion закрывает базовые появления и hover-эффекты без JS. GSAP подключается только там где нужен scroll-таймлайн или SVG-анимация. Итог: минимальный JS для простого, полная мощность для сложного.
Motion + Rive — связка для продуктовых интерфейсов. Motion управляет переходами между экранами, layout-анимациями и микровзаимодействиями в коде. Rive — для сложных иконок и иллюстраций которые дизайнер создал с состояниями. Каждый инструмент делает то для чего создан.
LottieFiles + любая код-библиотека — LottieFiles не конкурирует с Motion или GSAP, он их дополняет. Lottie-файл для loading-спиннера и success-анимации, Motion или TailwindCSS Motion для всего остального.
Что AI генерирует лучше всего
Cursor, Claude Code и v0 хорошо справляются с Motion и GSAP — синтаксис этих библиотек широко представлен в обучающих данных. TailwindCSS Motion генерируется точно и предсказуемо. Rive и Lottie — только подключение рантайма, сам файл анимации всё равно нужно создавать руками или получать от дизайнера.
Практический вывод: для сайтов которые строятся через AI-воркфлоу, связка TailwindCSS Motion + GSAP закрывает 90% задач без единого платного инструмента.
Чеклист перед деплоем
☐ Все анимации используют transform/opacity, не top/left/width/height
☐ Добавлен prefers-reduced-motion — через CSS, MotionConfig или gsap.matchMedia()
☐ Проверен Lighthouse на мобильном: CLS не вырос из-за анимаций появления
☐ Анимации за пределами вьюпорта не запускаются до скролла к ним
☐ Не больше 3–4 одновременных анимаций на один экран
☐ Lottie/Rive файлы загружаются лениво (lazy), не блокируют первый рендер
☐ В React: GSAP использует useGSAP(), не useEffect; анимации очищаются при unmount
Источник и полная версия: VibeCode Wiki