Переход с GSAP

Переход между анимационными библиотеками почти всегда связан не только с синтаксисом, но и с изменением модели мышления. В случае перехода с GSAP на Motion One меняется фундамент: от императивной системы управления таймлайнами и твинами к более декларативной модели, опирающейся на Web Animations API и минималистичный runtime.

GSAP исторически строится вокруг концепции полного контроля: создание твинов, управление позициями в таймлайне, сложные цепочки, ручная синхронизация. Motion One упрощает этот слой, оставляя только ключевые примитивы: animate, timeline, stagger, spring, scroll.

Ключевое отличие проявляется в том, как описывается анимация:

  • GSAP: объектная конфигурация + экземпляры твинов
  • Motion One: декларативное описание свойств и ключевых кадров

Базовый переход: tween → animate

В GSAP типичная анимация строится через gsap.to():

gsap.to(".box", {
  x: 300,
  opacity: 1,
  duration: 1,
  ease: "power2.out"
});

В Motion One эквивалент выглядит проще и ближе к Web Animations API:

import { animate } from "motion";

animate(".box", {
  x: 300,
  opacity: 1
}, {
  duration: 1,
  easing: "ease-out"
});

Разница не только синтаксическая. В GSAP объект анимации становится сущностью с методами (pause, reverse, seek). В Motion One анимация чаще рассматривается как результат функции.

Управление временем и длительностью

В GSAP длительность — часть конфигурации твина:

gsap.to(".box", {
  x: 400,
  duration: 2
});

В Motion One длительность отделена во второй аргумент:

animate(".box", { x: 400 }, { duration: 2 });

Такое разделение усиливает концепцию разделения состояния и поведения: свойства анимации отделены от параметров исполнения.

Easing: карта соответствий

GSAP использует богатую систему easing-строк и функций:

  • power1.out
  • power4.inOut
  • elastic.out
  • bounce.out

Motion One опирается на стандартизированные easing-функции CSS:

animate(".box", { x: 200 }, {
  easing: "ease-in-out"
});

или кастомные функции:

animate(".box", { x: 200 }, {
  easing: (t) => t * t * (3 - 2 * t)
});

В GSAP сложные easing-эффекты встроены в ядро, тогда как Motion One предпочитает минимализм и перенос части сложности в пользовательские функции или CSS.

Timeline: переход от GSAP к Motion One

GSAP timeline — одна из ключевых причин его популярности:

const tl = gsap.timeline();

tl.to(".box", { x: 100, duration: 1 })
  .to(".box", { y: 100, duration: 1 })
  .to(".box", { rotate: 180, duration: 1 });

В Motion One используется timeline, но концепция проще:

import { timeline } from "motion";

timeline([
  [".box", { x: 100 }, { duration: 1 }],
  [".box", { y: 100 }, { duration: 1 }],
  [".box", { rotate: 180 }, { duration: 1 }]
]);

Различие заключается в структуре:

  • GSAP: цепочка методов
  • Motion One: массив шагов

Это влияет на читаемость сложных сценариев: Motion One делает их более декларативными и статичными.

Stagger: упрощение массовых анимаций

В GSAP stagger реализуется через параметр:

gsap.to(".item", {
  y: 50,
  stagger: 0.1
});

Motion One сохраняет идею, но делает её более функциональной:

animate(".item", {
  y: 50
}, {
  delay: stagger(0.1)
});

Здесь stagger превращается в функцию, которая генерирует задержки, а не просто число. Это даёт больше контроля над логикой распределения времени.

Scroll-анимации: ScrollTrigger vs scroll()

GSAP использует отдельный плагин ScrollTrigger:

gsap.to(".box", {
  x: 300,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom top",
    scrub: true
  }
});

Motion One интегрирует scroll как часть ядра:

import { scroll } from "motion";

scroll(
  animate(".box", { x: 300 })
);

В более сложных сценариях управление прогрессом также упрощается:

scroll(({ progress }) => {
  animate(".box", { scale: progress });
});

Разница архитектурная:

  • GSAP: плагинная система с богатой конфигурацией
  • Motion One: функциональная обёртка над прогрессом скролла

Тайминги и контроль анимаций

GSAP предоставляет богатый API управления:

  • pause()
  • resume()
  • reverse()
  • seek()

Motion One ориентируется на Web Animations API, где контроль осуществляется через Animation объект:

const animation = animate(".box", { x: 300 });

animation.pause();
animation.play();
animation.cancel();

Модель ближе к браузерной спецификации, но менее расширена по сравнению с GSAP.

Производительность и архитектурная разница

GSAP использует собственный движок обновления (ticker), который обеспечивает стабильность между браузерами и сложными сценами.

Motion One опирается на:

  • Web Animations API
  • requestAnimationFrame только в fallback-режимах

Это приводит к следующей модели:

  • GSAP: контролируемый runtime
  • Motion One: использование нативного движка браузера

В результате уменьшается размер библиотеки и упрощается интеграция, но часть гибкости переносится на уровень браузера.

Ключевые концепции миграции API

1. from/to → animate

GSAP:

gsap.fromTo(".box",
  { opacity: 0 },
  { opacity: 1, duration: 1 }
);

Motion One:

animate(".box",
  { opacity: [0, 1] },
  { duration: 1 }
);

Ключевое изменение: использование массивов значений вместо двух объектов.

2. repeat и yoyo

GSAP:

gsap.to(".box", {
  x: 200,
  repeat: 2,
  yoyo: true
});

Motion One:

animate(".box", {
  x: 200
}, {
  repeat: 2,
  direction: "alternate"
});

3. задержки

GSAP:

gsap.to(".box", {
  x: 200,
  delay: 1
});

Motion One:

animate(".box", { x: 200 }, { delay: 1 });

Работа с ключевыми кадрами

GSAP поддерживает сложные цепочки через timeline или keyframes:

gsap.to(".box", {
  keyframes: [
    { x: 100, duration: 1 },
    { y: 100, duration: 1 },
    { rotate: 180, duration: 1 }
  ]
});

Motion One делает keyframes нативной частью API:

animate(".box", {
  x: [0, 100, 100],
  y: [0, 0, 100],
  rotate: [0, 0, 180]
}, {
  duration: 2
});

Модель становится ближе к CSS-анимациям и Web Animations API.

Гибкость против минимализма

GSAP предоставляет:

  • глубокую систему плагинов
  • сложные таймлайны
  • богатый easing engine
  • точный контроль времени

Motion One предоставляет:

  • минимальный API
  • нативную интеграцию с браузером
  • компактные декларации
  • упрощённую модель композиции

Ментальный сдвиг при миграции

Переход требует отказа от нескольких привычных паттернов:

  • вместо цепочек методов — массивы шагов
  • вместо объектов конфигурации твинов — разделённые аргументы
  • вместо плагинов — функциональные утилиты
  • вместо runtime-контроля — управление через Animation API

Основной эффект миграции заключается в уменьшении уровня абстракции между кодом и браузерной анимацией.

Оглавление