Анимация интерфейса: CSS, GSAP, Lottie и Rive

Главный критерий выбора: кто будет проигрывать. Если анимация внутри веб-страницы и разработчик рядом, бери CSS или GSAP: это код, который агент пишет и правит. Если одна и та же иконка нужна в вебе, iOS и Android, бери Lottie. Если элемент должен реагировать на действия (наведение, ввод, данные), бери Rive или стейт-машину dotLottie.

С лета 2026 в Figma есть таймлайн с ключевыми кадрами прямо на холсте. Анимацию можно экспортировать в CSS, JSON, React и motion.dev, в видео и GIF, а с осени и в Lottie. В Dev Mode разработчик видит тайминг, кривые и ключи. Агент через Figma MCP получает ту же информацию командой get_motion_context: список анимированных слоёв, keyframes и готовые фрагменты CSS (тема «ИИ внутри Figma»).

Это меняет процесс передачи. Раньше движение передавали видео и словами «примерно так». Теперь передаются числа: длительность, кривая, задержка. Разработчик или агент пересобирает их в коде один в один. Ограничение: анимировать через агента Figma, публиковать анимированные компоненты и экспортировать в высоком разрешении можно только на платном месте.

Большую часть интерфейсного движения можно сделать без библиотек. transition для смены свойств, @keyframes для последовательностей, prefers-reduced-motion для доступности. View Transitions API делает переходы между состояниями и даже страницами: браузер сам снимает «до» и «после» и анимирует разницу. Переходы внутри одной страницы работают во всех современных браузерах, между страницами — в Chrome и Safari, в Firefox пока частично.

Агент пишет это хорошо, если у него есть моушн-гайд из темы «Анимация с ИИ». Без гайда он поставит ease на 300 мс везде. Короткий промпт с числами решает:

Добавь переходы по моушн-гайду из motion.md: открытие панели 250 мс ease-out, закрытие 180 мс ease-in, элементы списка появляются со stagger 40 мс. Для prefers-reduced-motion замени перелёты на затухание 150 мс. Только CSS, без библиотек

GSAP — стандарт для сложного веб-моушна: таймлайны, ScrollTrigger для скролл-историй, SplitText для анимации букв, MorphSVG для превращения форм. С версии 3.13 всё это бесплатно, включая коммерческое использование: Webflow купил GSAP и открыл плагины. Motion (бывший Framer Motion) ближе к React и пружинам: анимация раскладки, жесты, прерываемые переходы. У Motion есть официальный MCP-сервер с документацией, так что агент берёт актуальный API, а не то, что помнит.

Для чего это нужно дизайнеру: скролл-истории на лендинге, появление секций, hero с морфингом логотипа, счётчики, которые «накручиваются». Это тот же вайбкодинг, что в теме «Вайбкодинг: сайты», только с таймлайном. Важная деталь из темы «Моушн-ролик кодом»: таймлайн GSAP умеет перематываться в любую точку, поэтому ту же анимацию можно отрендерить в видео для соцсетей через HyperFrames.

Собери hero-секцию на GSAP: логотип собирается из трёх фигур (MorphSVG) за 600 мс, заголовок появляется по словам (SplitText, stagger 60 мс), при скролле карточки выезжают по ScrollTrigger. Кривые и длительности из motion.md. Один таймлайн, который можно перемотать в любую секунду

Lottie — векторная анимация в JSON-файле, которую проигрывает плеер на вебе, в iOS и Android. Классический путь: After Effects с плагином Bodymovin. Новый путь: Lottie Creator от LottieFiles собирает анимацию в браузере, а Motion Copilot делает её из описания: «иконка колокольчика покачивается и выпускает две волны». Результат редактируемый: слои, кривые, циклы, а не запечённый ролик. Есть и MCP для Lottie Creator, так что агент может собирать анимацию сам.

Формат .lottie (dotLottie) пакует несколько анимаций и тем в один файл и поддерживает стейт-машины: входы, переходы, действия. Это позволяет иконке «нравится» реагировать на клик без кода вокруг. API стейт-машин ещё меняется, фиксируй версию плеера.

Ограничения Lottie: не все эффекты After Effects экспортируются (выражения, размытия, многие эффекты), тяжёлые файлы тормозят на мобильных. Проверяй в целевом плеере, а не в превью.

Rive делает интерактивную анимацию со стейт-машиной: у персонажа или элемента есть состояния (idle, hover, pressed, error), переходы между ними и входы, которые их переключают из кода. Данные привязываются напрямую: счётчик в анимации читает число из приложения. С 2026 в редакторе есть скрипты и ИИ-агент, который пишет скрипты, раскладки, модели данных и анимацию и показывает правки диффом, чтобы принять или отклонить.

Для дизайнера это путь к живым маскотам, интерактивным онбордингам, элементам, которые отвечают пользователю. Порог входа выше, чем у Lottie: нужно думать состояниями. Но это та же логика, что в теме «Моушн-ролик кодом»: список состояний с входом, выходом и причиной.

Ролик критикуют по контакт-листу, интерфейс — руками и глазами. Чеклист:

• Движение быстрее 100 мс не видно, медленнее 500 мс раздражает. Замерь, а не прикидывай.
• Вход мягче выхода. Выход быстрее входа.
• Движется одно главное. Если при открытии панели двигаются ещё фон, иконки и заголовок, оставь панель.
• Анимация не блокирует действие: кнопку можно нажать во время появления.
• Включи «уменьшить движение» в системе и пройди сценарий ещё раз. Смысл сохранился?
• Запусти на слабом телефоне. Lottie на 2 МБ и GSAP с сотней элементов там поведут себя иначе.

Агенту можно отдать часть проверки: «запиши переход, вытащи кадры каждые 50 мс, скажи, где длительность и кривая не совпадают с motion.md». Это та же идея контакт-листа, только с шагом в миллисекунды.

Прочитай motion.md и добавь переходы для всех интерактивных состояний в компоненте [имя]: hover, pressed, disabled, loading. Только CSS. Для prefers-reduced-motion отдельный блок

Подключи View Transitions для перехода между списком и карточкой: карточка вырастает из своей строки в списке. Укажи, в каких браузерах это сработает, а где упадёт на обычную навигацию

Собери скролл-историю на GSAP ScrollTrigger из четырёх секций: каждая закрепляется, пока текст не прочитан, числа накручиваются при появлении. Длительности из motion.md, Math.random не использовать

Иконка колокольчика 48×48: покачивается влево-вправо два раза за 600 мс, из верхней части расходятся две волны и тают. Цикл с паузой 2 с. Два цвета: #1A1A1A и #FF5A1F

Вот описание интерактивного элемента: [описание]. Разложи его на состояния для стейт-машины Rive: имя состояния, что на экране, какие входы переводят в другие состояния, длительность каждого перехода