Framer Motion: анимации, которые ИИ добавляет по умолчанию

Framer Motion — одна из тех библиотек, которые появляются в проекте курса сами, без явной просьбы. Просишь Claude Code сделать интерфейс «поживее» или «как в современных приложениях» — и в коде внезапно возникает строчка import { motion } from "framer-motion", а кнопки и экраны вместо резких скачков начинают двигаться плавно. Разбираемся, что это за инструмент, чем он отличается от одноимённого продукта той же компании и когда анимации в интерфейсе приносят пользу, а когда только мешают.

Что такое Framer Motion простыми словами

Framer Motion — это библиотека для React, фреймворка, на котором собирают интерфейсы большинство современных веб-приложений, включая проекты курса. Библиотека добавляет плавные анимации: появление и исчезновение элементов, переключение между экранами, реакцию на наведение курсора и нажатие. Всё это делается несколькими строками кода вместо того, чтобы вручную прописывать CSS-анимации и следить, как они синхронизируются с состоянием приложения.

Работает это так. У обычного HTML-элемента, скажем <div>, есть аналог с приставкой motion — <motion.div>. Разница в том, что у этого аналога появляются специальные свойства для анимации:

import { motion } from "framer-motion";

function Card() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      Новая карточка
    </motion.div>
  );
}

initial описывает, каким элемент был до анимации, animate — каким он должен стать, transition — как долго и с каким характером движения это происходит. Библиотека сама вычисляет промежуточные кадры и плавно переводит элемент из одного состояния в другое. Разработчику не нужно писать формулы движения или считать проценты — достаточно описать начальную и конечную точку, а Framer Motion достроит путь между ними.

Похожим образом работает мультфильм в старой анимационной студии: художник рисует только ключевые кадры — герой в начале прыжка и герой в конце прыжка, — а промежуточные фазы дорисовывает другой специалист, отвечающий именно за плавность движения между ключевыми точками. В Framer Motion роль такого специалиста берёт на себя код библиотеки: он получает от разработчика только начало и конец пути и сам строит движение между ними.

Библиотеку делает компания Framer, известная в первую очередь инструментом для дизайна интерфейсов. Framer Motion — это её open source проект, отдельный пакет, который устанавливается через npm (менеджер пакетов для JavaScript, о нём подробнее в статье про Node.js) и используется в коде React-приложения, а не в самом дизайнерском инструменте компании.

Как Framer Motion попадает в проект

Библиотека — это просто чужой код, который подключается к своему проекту одной командой в терминале:

npm install framer-motion

После этой команды в проекте появляется папка node_modules с кодом библиотеки и строчка "framer-motion" в файле package.json — списке всех подключённых к проекту библиотек с их версиями. Дальше в любом файле компонента достаточно написать import { motion } from "framer-motion", чтобы получить доступ ко всем возможностям библиотеки.

На курсе эту команду обычно вводит не сам ученик, а ИИ-ассистент — он видит, что задача требует анимаций, и сам решает подключить библиотеку, а затем сразу написать код, который её использует. Отсюда и эффект неожиданности: строчка npm install framer-motion в истории команд появляется как будто сама, хотя по факту её выполнил ассистент в ответ на обычную просьбу про интерфейс.

Framer Motion — это не Framer AI

Здесь легко запутаться, потому что у компании Framer есть два разных продукта с почти одинаковым названием, и оба всплывают в разговорах про ИИ-разработку.

Framer AI — конструктор сайтов, который превращает текстовое описание в готовый макет и публикует его как отдельный сайт. Про него уже есть отдельный разбор на курсе: Framer AI: как быстро собрать дизайн и сайт. Им пользуются, когда нужен лендинг или простой сайт без единой строчки кода — вводишь описание, получаешь готовую страницу.

Framer Motion — совсем другая история. Это библиотека кода, которую подключают внутрь React-проекта, чтобы добавить анимации к уже существующему интерфейсу. Никакого текстового описания сайта она не понимает и сайты не генерирует — она отвечает только за то, как элементы двигаются на экране.

Общее у них — только имя компании-создателя. Задачи решают принципиально разные: один продукт заменяет вёрстку сайта целиком, второй встраивается в уже написанный код и оживляет его. Если в задании для ИИ-ассистента встречается слово Framer, стоит на секунду уточнить, о чём идёт речь — о готовом сайте или об анимациях внутри своего проекта.

Почему ИИ сам добавляет Framer Motion в проект

Если попросить Claude Code «добавить анимации» или сделать интерфейс «как в современных приложениях», не указывая конкретный инструмент, ассистент почти наверняка выберет Framer Motion. Причина простая: это самая популярная библиотека анимаций в экосистеме React, с большим количеством готовых примеров и понятным синтаксисом.

Когда языковая модель обучается на коде из открытых репозиториев и документации, она видит Framer Motion гораздо чаще, чем менее популярные альтернативы. Значит, именно её паттерны — motion.div, initial/animate, AnimatePresence — модель воспроизводит увереннее всего. Это похоже на то, как переводчик выбирает самое частотное слово из нескольких синонимов: не потому что оно единственно верное, а потому что оно статистически привычнее.

Есть и практическая причина. Framer Motion хорошо совмещается с React: анимация управляется прямо из компонента, реагирует на изменения состояния приложения и не требует отдельного файла со стилями для каждого эффекта. Для ИИ-ассистента, который пишет код небольшими порциями и должен сразу получить рабочий результат, это удобный инструмент — минимум кода, предсказуемый результат.

На практике это выглядит так: просишь «сделай так, чтобы уведомление плавно появлялось», ИИ подключает библиотеку, оборачивает нужный элемент в motion.div и добавляет пару строк с анимацией. Работает — и часто без дополнительных объяснений, что именно появилось в зависимостях проекта. Полезно знать об этом заранее, чтобы не удивляться новой записи в package.json (файле, где перечислены все подключённые библиотеки) после обычной просьбы про интерфейс.

Framer Motion не единственная библиотека анимаций для React — есть и другие, со своими сильными сторонами. Но в подавляющем большинстве генерируемого кода встречается именно она, поэтому и в проектах курса вероятнее всего окажется она же. Если хочется конкретную альтернативу — стоит прямо назвать её ИИ-ассистенту в задаче: «сделай анимацию без Framer Motion, обойдись CSS» — тогда результат будет другим.

Чем Framer Motion отличается от CSS-анимаций

К этому моменту курса CSS-анимации уже знакомы — они разбирались в статье про Tailwind CSS, где классы вроде transition и duration-300 задают простые эффекты прямо в разметке. Логичный вопрос: зачем тогда ещё одна библиотека, если анимации можно сделать классами?

CSS-анимации хорошо справляются с простыми, предсказуемыми эффектами: кнопка меняет цвет при наведении, элемент плавно появляется при загрузке страницы. Стили пишутся один раз и работают сами по себе, без участия JavaScript-кода.

Сложности начинаются, когда анимацией нужно управлять из логики приложения. Например: анимировать появление списка карточек только после того, как данные загрузились с сервера, а не сразу при отрисовке страницы. Или проиграть анимацию исчезновения и дождаться, пока она закончится, прежде чем удалить элемент из DOM (дерева элементов страницы, которое видит браузер) — обычный CSS этого не умеет вовсе, ему безразлично, доигралась анимация или нет.

Framer Motion решает именно эту задачу. Анимация описывается в React-компоненте и напрямую связана с состоянием приложения:

import { motion, AnimatePresence } from "framer-motion";

function Notification({ isVisible, message }) {
  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -10 }}
        >
          {message}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

Здесь isVisible — обычная переменная состояния React. Как только она становится true, элемент появляется с анимацией; как только false — компонент AnimatePresence даёт элементу доиграть анимацию исчезновения и только потом убирает его из разметки.

На чистом CSS попытка сделать то же самое выглядит заметно неуклюжей. Класс с анимацией можно навесить на элемент, но убрать элемент из разметки нужно вручную — и если сделать это сразу по клику, анимация исчезновения просто не успеет проиграться:

.notification {
  animation: fadeOut 0.3s;
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

// без библиотеки: приходится ловить конец анимации вручную
element.addEventListener("animationend", () => {
  element.remove();
});

Рабочий вариант получается, но требует отдельного слушателя события animationend и ручного управления моментом удаления элемента. Framer Motion берёт эту синхронизацию на себя: достаточно один раз описать exit, а всё остальное — ожидание конца анимации и удаление элемента из разметки — библиотека делает сама.

Для статичных эффектов, которые не зависят от данных и логики, CSS-классов из Tailwind обычно достаточно. Как только анимация должна реагировать на состояние приложения — что загрузилось, что нажато, что изменилось, — удобнее становится Framer Motion.

Какие анимации умеет делать Framer Motion

У библиотеки широкий набор возможностей, но на старте достаточно знать четыре основных сценария.

Появление и исчезновение элементов

Самый частый случай — всплывающее окно, уведомление или подсказка, которые должны не выскакивать резко, а плавно появляться и так же плавно уходить. Это ровно то, что показано в примере с уведомлением выше: initial задаёт состояние до появления, animate — итоговое состояние, exit — то, что происходит при исчезновении.

Переключение между экранами

Когда приложение переходит с одного экрана на другой — например, из меню в игру — можно сделать так, чтобы старый экран плавно исчезал, а новый плавно проявлялся, вместо мгновенной подмены содержимого:

<AnimatePresence mode="wait">
  <motion.div
    key={currentScreen}
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
  >
    {currentScreen === "menu" ? <Menu /> : <Game />}
  </motion.div>
</AnimatePresence>

Свойство key здесь важно: когда его значение меняется, React понимает, что это уже другой компонент, и запускает анимацию перехода между ними.

Реакция на курсор

Кнопки и карточки можно оживить реакцией на наведение и нажатие без единой строчки в CSS:

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Начать игру
</motion.button>

whileHover описывает состояние во время наведения курсора, whileTap — во время нажатия. Кнопка немного увеличивается при наведении и слегка сжимается при клике — привычный многим микро-отклик, который делает интерфейс более отзывчивым на ощупь.

Перетаскивание элементов

Framer Motion умеет делать элементы перетаскиваемыми буквально одним свойством:

<motion.div drag dragConstraints={{ left: 0, right: 300, top: 0, bottom: 0 }}>
  Перетащи меня
</motion.div>

dragConstraints ограничивает область, в которой элемент можно двигать. Это удобно для слайдеров, карточек в духе «смахни, чтобы отклонить» или перетаскиваемых панелей — то, что вручную писать через мышиные события заметно дольше.

Все четыре сценария сочетаются друг с другом: карточка может одновременно уметь появляться с анимацией, реагировать на наведение и перетаскиваться. В большинстве интерфейсов курса хватает первых двух — появления элементов и переключения экранов, остальное чаще нужно уже в более сложных проектах.

Анимация по очереди (stagger)

Когда на экране появляется список — карточки товаров, пункты меню, результаты поиска, — резкое появление всех элементов разом выглядит хуже, чем если бы они проявлялись друг за другом с небольшой задержкой. Framer Motion умеет это через объект variants, который описывает состояние родителя и детей отдельно:

const list = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.1 } },
};

const item = {
  hidden: { opacity: 0, y: 10 },
  visible: { opacity: 1, y: 0 },
};

<motion.ul initial="hidden" animate="visible" variants={list}>
  {items.map((it) => (
    <motion.li key={it.id} variants={item}>
      {it.title}
    </motion.li>
  ))}
</motion.ul>

staggerChildren: 0.1 означает, что каждый следующий элемент списка запускает свою анимацию с задержкой в одну десятую секунды после предыдущего. На экране это выглядит как плавная волна появления сверху вниз, а не единовременный рывок.

Анимация при прокрутке страницы

Ещё один частый запрос — чтобы блок появлялся не сразу при загрузке, а в момент, когда пользователь долистал до него. За это отвечает свойство whileInView, которое реагирует на попадание элемента в видимую область экрана:

<motion.section
  initial={{ opacity: 0, y: 30 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
>
  Блок появится при прокрутке
</motion.section>

viewport={{ once: true }} означает, что анимация проигрывается один раз при первом появлении блока в поле зрения, а не при каждом повторном скролле мимо него. Это уместно для лендингов и длинных страниц с описанием продукта, реже нужно в компактных интерфейсах вроде игры.

Плавное изменение размера и положения (layout)

Если элемент меняет размер или позицию из-за изменения данных — например, карточка становится шире после раскрытия текста, — можно попросить Framer Motion анимировать сам переход между старым и новым состоянием, добавив одно свойство:

<motion.div layout>
  {isExpanded ? <FullText /> : <ShortText />}
</motion.div>

Свойство layout включает автоматическое отслеживание изменения размеров и позиции элемента между рендерами. Библиотека сама вычисляет, что изменилось, и плавно анимирует переход, не требуя отдельно прописывать initial и animate для каждого возможного размера.

Пример: анимации в «Змейке»

В учебном проекте курса — игре «Змейка» — есть несколько мест, где анимации из коробки выглядят резко, а с Framer Motion становятся заметно приятнее.

Экран «Игра окончена» обычно просто заменяет игровое поле мгновенно, без перехода. Стоит попросить ИИ-ассистента анимировать его появление — и вместо рывка получится плавное наплывание с лёгким увеличением:

<AnimatePresence>
  {isGameOver && (
    <motion.div
      className="game-over-screen"
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.9 }}
    >
      <h2>Игра окончена</h2>
      <p>Счёт: {score}</p>
    </motion.div>
  )}
</AnimatePresence>

Похожая история — с новым рекордом. Без анимации число рекорда просто мгновенно меняется на новое значение, и легко пропустить момент, что рекорд вообще обновился. С Framer Motion можно сделать так, чтобы цифра плавно увеличивалась и на секунду подсвечивалась другим цветом — тогда факт нового рекорда считывается сразу, без дополнительного текста «Новый рекорд!» рядом.

Для такой правки не обязательно писать код руками. Достаточно сформулировать задачу конкретно: «сделай так, чтобы экран „Игра окончена” появлялся плавно, а не резко» или «анимируй обновление рекорда — пусть цифра увеличится на секунду». ИИ-ассистент сам подберёт нужные свойства initial, animate и transition под конкретный случай.

Как читать код с анимациями, который написал ИИ

Даже не собираясь писать код руками, полезно понимать словарь, которым описываются анимации Framer Motion — тогда правки формулируются точнее, а результат ИИ-ассистента легче проверить на глаз, не запуская проект.

• initial — состояние элемента до начала анимации. Если тут opacity: 0, элемент стартует невидимым.
• animate — состояние, к которому элемент движется. opacity: 1 значит, что после анимации он станет полностью видимым.
• exit — состояние при исчезновении, работает вместе с AnimatePresence. Без него элемент просто пропадает мгновенно, без анимации ухода.
• transition — как именно происходит движение: duration задаёт длительность в секундах, delay — задержку перед стартом, ease — характер движения (плавный старт, плавное торможение или равномерное движение).
• whileHover / whileTap — временные состояния на время наведения курсора или нажатия, автоматически возвращаются к обычному состоянию после.
• variants — именованные наборы состояний, которые можно переиспользовать в нескольких элементах и связывать между родителем и детьми, как в примере со списком выше.

Если после правки анимация ведёт себя не так, как хотелось, — слишком быстро, слишком медленно, срабатывает не в тот момент, — достаточно указать на конкретное свойство: «увеличь duration до половины секунды» или «добавь delay, чтобы анимация начиналась чуть позже». Такая формулировка ИИ-ассистенту понятнее, чем общее «сделай анимацию лучше», и обычно приводит к результату с первой попытки.

Когда анимации в интерфейсе мешают, а не помогают

У анимаций есть обратная сторона: избыток замедляет восприятие интерфейса и раздражает, даже если каждая отдельная анимация сама по себе выглядит красиво.

Проблема в накоплении задержек. Если каждое действие — открытие меню, переключение вкладки, появление уведомления — сопровождается анимацией на полсекунды, за несколько действий подряд эти полсекунды складываются в ощутимую паузу. Пользователь хочет быстро сделать дело, а вместо этого ждёт, пока доиграет очередной эффект.

Вторая проблема — неуместность. ИИ-ассистент, выполняя просьбу «сделай интерфейс современнее», иногда добавляет анимацию туда, где она не нужна вовсе: к обычному тексту, к элементам списка, которые появляются один за другим с заметной задержкой, к кнопкам, которые и так были понятны без эффекта увеличения при наведении. Анимация в таких местах не помогает пользователю понять интерфейс — она просто занимает время.

Если после очередной правки интерфейс стал ощущаться медленным или «дёрганым», стоит прямо попросить убрать лишнее: «эта анимация появления слишком долгая, сократи её» или «убери анимацию у этого списка, оставь только у уведомлений». Framer Motion не требует удалять библиотеку целиком — часто достаточно убрать motion-обёртку у конкретного элемента или сократить duration в настройках перехода.

Разумный ориентир — анимации должны быть незаметными по себе и заметными по результату. Хорошая анимация появления уведомления длится две-три десятых секунды: пользователь замечает, что что-то произошло, но не ждёт, пока эффект закончится. Если анимация настолько заметна, что на неё уходит внимание, — она, скорее всего, слишком длинная или слишком частая.

Три признака, что анимаций стало слишком много, помогают заметить проблему раньше, чем она превратится в жалобы пользователей:

• Раздражение при повторном действии. Первый раз анимация нравится, на пятый — начинает мешать. Если элемент открывается и закрывается часто, эффект на нём стоит сократить или убрать вовсе.
• Ощущение задержки перед результатом. Пользователь нажал кнопку, а видимый отклик появился не сразу, а через полсекунды анимации. Для частых действий такая пауза раздражает сильнее, чем помогает.
• Анимация ради анимации. Эффект есть, но не сообщает ничего нового — просто занимает время. Такие места первыми стоит упрощать.

Насколько Framer Motion утяжеляет сборку

У любой подключённой библиотеки есть цена — она добавляет код к финальной сборке приложения, а значит, увеличивает время его загрузки в браузере. Framer Motion добавляет к размеру сборки несколько десятков килобайт — для подавляющего большинства учебных и небольших коммерческих проектов эта разница незаметна на глаз при обычном интернет-соединении.

Если в проекте уже используются десятки других библиотек и сборка становится действительно тяжёлой, стоит смотреть на общую картину, а не на одну конкретную библиотеку анимаций. Framer Motion в списке подозреваемых обычно далеко не на первом месте — куда чаще размер сборки раздувают библиотеки готовых компонентов, шрифты и неиспользуемый код, который забыли удалить.

На старте, пока проект небольшой и состоит из нескольких экранов, беспокоиться об этом не стоит вовсе. Вопрос размера сборки становится практическим уже на этапе, когда приложение растёт и появляется отдельная задача по оптимизации загрузки — для «Змейки» и похожих учебных проектов курса до этого обычно далеко.

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

Частые вопросы

Framer Motion — это то же самое, что Framer AI?

Нет. Framer AI — конструктор сайтов по текстовому описанию, отдельный продукт для готовых лендингов. Framer Motion — библиотека кода для React, которая добавляет анимации в уже написанный интерфейс. У них общий создатель — компания Framer, но разные задачи и разный способ использования.

Нужно ли самому писать код для Framer Motion, если проект собирает ИИ?

Нет, писать код руками не обязательно. Достаточно сформулировать задачу словами — «сделай так, чтобы окно появлялось плавно» — и ИИ-ассистент сам подберёт нужные свойства библиотеки. Понимание того, что делают initial, animate и exit, помогает точнее формулировать правки и быстрее замечать, если анимация получилась не такой, как хотелось.

Как понять, что в проекте уже используется Framer Motion?

Проще всего заглянуть в файл package.json — там среди зависимостей будет строка "framer-motion". Другой признак — в коде компонентов встречаются motion.div, motion.button и похожие элементы вместо обычных div и button.

Можно ли отказаться от Framer Motion и оставить только CSS-анимации?

Можно. Если в интерфейсе только простые эффекты — смена цвета при наведении, плавное появление при загрузке страницы, — обычных CSS-классов достаточно, и отдельная библиотека не нужна. Framer Motion становится полезен, когда анимацией нужно управлять из логики приложения: например, дожидаться загрузки данных или доигрывать анимацию исчезновения перед удалением элемента.

Замедляет ли Framer Motion работу приложения?

Сама библиотека рассчитана на плавную работу и не должна вызывать заметных тормозов при разумном использовании. Ощущение медленного интерфейса обычно возникает не из-за производительности, а из-за количества и длительности анимаций — когда их слишком много или они слишком долгие. Решение в этом случае — не отказ от библиотеки, а сокращение числа анимированных элементов и уменьшение длительности переходов.

Стоит ли добавлять анимации в первую версию проекта на курсе?

Не обязательно. На первых этапах важнее, чтобы приложение просто работало правильно — реагировало на действия, сохраняло данные, не ломалось. Анимации — это слой полировки, который логично добавлять, когда основная функциональность уже готова и стабильна. Просить Framer Motion можно на любом этапе, но приоритет разумно отдавать сначала рабочей логике.

Заключение

Framer Motion — удобный инструмент, который часто появляется в проекте курса без отдельной просьбы, просто потому что ИИ-ассистент выбирает его по умолчанию для любой задачи с анимациями. Знать про него полезно ровно настолько, чтобы не путать с Framer AI, понимать разницу с CSS-анимациями из Tailwind и вовремя замечать, когда анимаций стало слишком много. Формулировать правки к анимациям — куда, как долго, стоит ли вообще — получится увереннее, если хотя бы в общих чертах представлять, что стоит за словами initial, animate и exit в коде, который пишет ИИ.

Общий принцип шире одной конкретной библиотеки: ИИ-ассистент почти всегда выбирает самый популярный и предсказуемый инструмент для задачи, а не единственно возможный. Framer Motion в мире React-анимаций — ровно такой выбор по умолчанию. Понимание, почему инструмент выбран именно этот и что он на самом деле делает, превращает работу с ИИ из слепого доверия в осознанную проверку результата.