Продвинутая анимация с GSAP и Framer Motion: секреты плавных переходов и сложных timeline-эффектов

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

Почему GSAP и Framer Motion?

За 15 лет работы с анимацией я перепробовал десятки библиотек, но именно этот дуэт стал для меня золотым стандартом.
GSAP (GreenSock Animation Platform) это Ferrari среди анимационных инструментов:

• Точный контроль над каждым кадром
• Производительность на уровне нативного WebGL
• Полная кросс-браузерность

Framer Motion — идеальный выбор для React-разработчиков:

• Нативная интеграция с компонентами
• Интуитивный API для быстрого прототипирования
• Поддержка жестов и адаптивной анимации

Сравнительная таблица: GSAP против Framer Motion

Данные основаны на тестах в Chrome 120, React 18, GSAP 3.12

Секреты плавных переходов в GSAP

1. CustomEase: ваш секретный ингредиент

Стандартные easing-функции часто выглядят «пластиково». Решение — создание собственных кривых через GSAP Ease Visualizer:

CustomEase.create("myEase", "M0,0 C0.32,0 0.42,0.42 0.5,0.5 0.58,0.58 0.68,1 1,1");

gsap.to(".element", {
  x: 500,
  duration: 2,
  ease: "myEase"
});

2. Морфинг SVG с MorphSVGPlugin

Для сложных трансформаций SVG-форм:

gsap.to("#shape", {
  duration: 2,
  morphSVG: {
    shape: "#targetShape",
    shapeIndex: 2
  },
  repeat: -1,
  yoyo: true
});

3. Физика движения через Physics2DPlugin

Реалистичная симуляция физики:

gsap.to(".ball", {
  physics2D: {
    velocity: 200,
    angle: 80,
    gravity: 500
  },
  duration: 3
});

Мастерская Timeline: сложные последовательности

Пример: Интерактивная инфографика

const tl = gsap.timeline({
  defaults: { duration: 1, ease: "power2.inOut" },
  onComplete: () => console.log("Анимация завершена!")
});

tl.from(".chart", { scale: 0 })
  .addLabel("startBars")
  .from(".bar", {
    height: 0,
    stagger: 0.2,
    onStart: () => initTooltips()
  }, "startBars+=0.5")
  .to(".legend", {
    opacity: 1,
    duration: 0.8
  }, "-=0.3");

Секреты:

• Используйте position parameter для точного позиционирования
• Комбинируйте метки (addLabel) с относительными смещениями (+=)
• Управляйте скоростью через timeScale(1.5)

Framer Motion в React-экосистеме

1. Адаптивные жесты

<motion.div
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
  drag="x"
  dragConstraints={{ left: 0, right: 200 }}
/>

2. Синхронизация с прокруткой

const { scrollYProgress } = useScroll();
const scale = useTransform(scrollYProgress, [0, 1], [0.5, 2]);

return <motion.div style={{ scale }} />;

3. Комплексные переходы с ключевыми кадрами

<motion.path
  animate={{ d: pathVariants }}
  transition={{
    duration: 2,
    times: [0, 0.2, 0.6, 1],
    ease: ["easeIn", "circOut", "anticipate"]
  }}
/>

Бенчмарки: GSAP против Framer Motion

Тестирование на MacBook M1, 1000 элементов, WebGL ускорение включено

Когда что выбирать: мои рекомендации

✅ GSAP:

• Сложные баннеры с точным таймингом
• Игры на Canvas/WebGL
• Продвинутые SVG-эффекты

✅ Framer Motion:

• React-приложения с компонентным подходом
• Быстрые прототипы с drag-and-drop
• Анимации, зависимые от состояния

За годы работы я выработал простое правило: 70% анимаций делаю через GSAP для максимальной производительности, 30% через Framer Motion для интеграции с React. Главный секрет, комбинируйте обе библиотеки! Например, управление сложными timeline через GSAP и рендеринг через motion-компоненты.

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