Motion vs GSAP: нужны ли вам обе библиотеки?

Большинство React-проектов стоит начинать с Motion для анимаций, управляемых компонентами и состоянием, добавляя GSAP лишь при появлении конкретной необходимости — скруббируемого scroll-таймлайна, сложных последовательностей или работы с SVG/canvas.

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

Два факта делают большинство устаревших сравнений неактуальными. Motion (ранее Framer Motion) теперь доступен для React, JavaScript и Vue, и импортируется из motion/react вместо framer-motion. Это больше не исключительно React-библиотека. GSAP также перестал быть платным: благодаря Webflow весь инструментарий GSAP теперь бесплатен, включая все дополнительные плагины, такие как SplitText и MorphSVG, которые ранее были доступны только участникам Club GSAP, в том числе для коммерческого использования.

Чем отличаются Motion и GSAP?

Различие ментальных моделей — это и есть суть всего выбора. Motion является декларативным (вы описываете конечное состояние, а библиотека выполняет интерполяцию), тогда как GSAP — императивным и управляемым таймлайнами, где вы управляете каждым шагом с точным контролем над тайминговыми и easing-параметрами.

В Motion вы задаёте целевые значения через пропсы, а библиотека сама определяет переход:

import { motion } from "motion/react";

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
/>

При изменении значений в animate Motion автоматически выполняет переход между ними; физические свойства, такие как x и scale, по умолчанию используют физику пружин, тогда как визуальные свойства, например opacity, применяют tween-easing. GSAP инвертирует этот подход: вы пишете императивные вызовы и выстраиваете их в цепочку на таймлайне для управления последовательностью и стаггером. Это различие — описать результат против хореографии каждого такта — точнее любого бенчмарка предсказывает, какой инструмент лучше подходит для конкретной задачи.

Сравнение Motion и GSAP по ключевым критериям

Ниже представлено сравнение по осям, которые frontend-разработчик взвешивает при выборе библиотеки анимации: ментальная модель, интеграция, scroll/таймлайн, производительность, размер бандла, охват фреймворков и лицензирование.

В части интеграции Motion создан для компонентных приложений: он анимирует переходы между любыми двумя макетами с помощью единственного пропа layout, а AnimatePresence удерживает элементы в DOM, позволяя им анимироваться при удалении. GSAP занимает свою нишу благодаря таймлайнам и ScrollTrigger, который является стандартом для scroll-driven анимации.

По производительности обе библиотеки нацелены на 60fps в типичных сценариях, и маркетинговые материалы ни одного из вендоров не дают окончательного ответа. Гибридный движок Motion запускает анимации нативно в браузере через Web Animations API и ScrollTimeline, переключаясь на JavaScript при необходимости физики пружин или отслеживания жестов. Сайт Motion заявляет, что его API «до 90% меньше по размеру, чем аналоги GSAP», однако это цифра самого вендора, а не нейтральное измерение. Воспринимайте её как маркетинг. Важнее реальное поведение на устройствах. Сессионный реплей продакшн-страниц выявляет класс сбоев, которые бенчмарки упускают: пропуск кадров при scroll-linked анимации или layout shift, вызванный входящим переходом на бюджетном смартфоне.

По размеру бандла обе библиотеки модульны. Motion поддерживает tree-shaking и имеет небольшой базовый размер, а ядро GSAP легковесно, с плагинами, подключаемыми по необходимости. По лицензированию Motion распространяется под лицензией MIT, а GSAP теперь поставляется под бесплатной стандартной лицензией.

Когда использовать Motion, а когда GSAP?

Выбирайте Motion для UI, управляемого состоянием: переходы входа/выхода с AnimatePresence, автоматические layout-анимации, жесты и переходы между страницами внутри дерева компонентов. Он органично вписывается в цикл рендеринга React, поэтому анимации реагируют на состояние и пропсы без ручной связки.

Выбирайте GSAP для скруббируемых, последовательных сценических эффектов: scroll-linked сторителлинг с ScrollTrigger, stagger-таймлайны и анимация SVG или canvas, которую Motion не охватывает. GSAP анимирует CSS, SVG, canvas, React, Vue, WebGL, цвета, строки и motion path — тот охват, на который опираются маркетинговые сайты и проекты по визуализации данных. Обе библиотеки поддерживают prefers-reduced-motion, поэтому доступность не является решающим фактором; относитесь к ней как к общей ответственности при любом выборе.

Нужны ли вам обе библиотеки?

Да: использование обеих библиотек одновременно — распространённая и полностью поддерживаемая практика: Motion для микровзаимодействий на уровне компонентов, GSAP для scroll-секций и таймлайн-сценариев. Такая комбинация является полноценным подходом в React. useGSAP() из пакета @gsap/react — это drop-in замена для useEffect()/useLayoutEffect(), которая автоматически управляет очисткой и использует изоморфный layout-effect, что делает её безопасной в средах с серверным рендерингом, включая Next.js App Router, при условии что компонент является клиентским:

"use client";
import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

function Hero() {
  const container = useRef(null);
  useGSAP(() => {
    gsap.from(".title", { y: 40, opacity: 0, duration: 0.6 });
  }, { scope: container });

  return (
    <section ref={container}>
      <h1 className="title">Hello</h1>
    </section>
  );
}

Реальная цена подхода «обе библиотеки» ощутима: два анимационных рантайма означают суммарный вес бандла и две ментальные модели для команды. Добавляйте вторую библиотеку только при конкретной необходимости, а не по умолчанию. На практике это означает, что Motion берёт на себя кнопки, модальные окна и layout-переходы, тогда как GSAP обрабатывает единственную scroll-нарративную секцию, с которой Motion справлялся бы с трудом.

Вердикт

Рекомендация по умолчанию для React-приложения: начинайте только с Motion и вводите GSAP при первом столкновении со скруббируемым scroll-таймлайном, сложным секвенированием или работой с SVG/canvas. Однако если проект преимущественно построен на scroll-driven нарративе — начинайте с GSAP и обращайтесь к Motion лишь при росте потребности в анимациях, управляемых состоянием компонентов. Обе библиотеки актуальны, бесплатны и поддерживают различные фреймворки, поэтому выбор определяется соответствием задаче, а не лицензированием. Выбирайте ту, на которую указывает ваш доминирующий паттерн анимации, зафиксируйте версии (Motion v12.42.2, GSAP v3.15.0) и добавляйте вторую только тогда, когда реальные требования вынуждают к этому.

Часто задаваемые вопросы

Умер ли Framer Motion и что с ним произошло?

Framer Motion не умер: в 2024 году он был переименован в Motion и стал самостоятельным проектом, расширив поддержку за пределы React на JavaScript и Vue. Теперь нужно устанавливать пакет 'motion' и импортировать из 'motion/react' вместо 'framer-motion'. Библиотека остаётся MIT-лицензированной и активно поддерживается на ветке v12. Старые руководства, ссылающиеся на импорты из 'framer-motion', по-прежнему работают через путь совместимости, однако в новых проектах следует использовать актуальное название пакета.

Является ли GSAP по-прежнему платным, или нужна лицензия Club GreenSock?

GSAP теперь полностью бесплатен, включая все ранее платные плагины: SplitText, MorphSVG, DrawSVG, ScrollTrigger и ScrollSmoother. После приобретения GreenSock компанией Webflow в 2024 году платный доступ был упразднён 30 апреля 2025 года, а стандартная лицензия распространена на коммерческое использование. Библиотека бесплатна для всех независимо от использования Webflow, поэтому членство в Club GreenSock не требуется для доступа к каким-либо функциям.

Можно ли использовать Motion и GSAP вместе в проекте на Next.js App Router?

Да. Используйте официальный хук useGSAP() из пакета '@gsap/react', который управляет очисткой и совместим с React Strict Mode, и пометьте компонент директивой 'use client', поскольку компоненты App Router по умолчанию являются серверными. useGSAP() использует изоморфный layout-effect, что делает его безопасным для SSR при условии выполнения в клиентском компоненте. Компоненты Motion работают в том же дереве для анимаций состояния и layout без конфликтов.

Поддерживает ли Motion scroll-triggered анимации, или по-прежнему нужен ScrollTrigger от GSAP?

Motion поддерживает scroll-linked анимацию через хук useScroll и нативный ScrollTimeline, что покрывает распространённые эффекты, такие как индикаторы прогресса и параллакс, привязанные к позиции прокрутки. Для скруббируемых, точно выстроенных scroll-нарративов с закреплением, снэппингом и сложными таймлайнами ScrollTrigger от GSAP предоставляет больший контроль и является устоявшимся стандартом. Если ваша scroll-анимация представляет собой простую привязку прогресса прокрутки к значению — Motion достаточно; обращайтесь к ScrollTrigger, когда хореография становится сложной.