Плагин animation.gsap

Для работы с плагином animation.gsap требуется наличие двух библиотек: ScrollMagic и GSAP (GreenSock Animation Platform). Подключение обычно осуществляется через <script> или через npm-пакеты:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

Важно подключать GSAP до ScrollMagic animation.gsap, так как плагин использует методы GSAP для анимаций.

Создание контроллера

Контроллер управляет всеми сценами ScrollMagic и синхронизирует их с прокруткой страницы:

const controller = new ScrollMagic.Controller();

Контроллер может быть один на страницу, хотя допустимо создание нескольких контроллеров для разных блоков с независимым поведением.

Создание сцены с GSAP-анимацией

Сцена (ScrollMagic.Scene) определяет, когда и как анимация запускается. Основные параметры:

  • triggerElement — элемент, при котором начинается анимация.
  • duration — длина прокрутки, на протяжении которой анимация выполняется.
  • offset — смещение относительно triggerElement.

Пример интеграции с GSAP:

const tween = gsap.to(".box", { x: 500, rotation: 360, duration: 2 });

const scene = new ScrollMagic.Scene({
  triggerElement: ".trigger",
  duration: 400,
  offset: 50
})
.setTween(tween)
.addTo(controller);

Пояснения к коду:

  • gsap.to() создаёт анимацию, которая изменяет свойства элемента .box.
  • .setTween(tween) связывает анимацию с сценой ScrollMagic. При прокрутке страницы анимация будет проигрываться в зависимости от положения скролла.
  • .addTo(controller) добавляет сцену в контроллер для отслеживания.

Контроль поведения анимации

animation.gsap поддерживает несколько вариантов контроля:

  1. play / reverse — анимация проигрывается или возвращается назад в зависимости от направления прокрутки:
scene.on("enter", () => tween.play());
scene.on("leave", () => tween.reverse());
  1. pinning элементов — фиксация элемента на экране на время сцены:
const pinScene = new ScrollMagic.Scene({
  triggerElement: ".section",
  duration: 600
})
.setPin(".section-content")
.setTween(gsap.to(".section-content", { y: -200, opacity: 0.5 }))
.addTo(controller);
  • .setPin() «приковывает» элемент к окну браузера.
  • Комбинация pin + tween создаёт эффекты параллакса или плавного исчезновения/движения.
  1. timeline GSAP — для последовательных анимаций:
const tl = gsap.timeline();
tl.to(".box1", { x: 200, duration: 1 });
tl.to(".box2", { y: 100, duration: 1 });

new ScrollMagic.Scene({
  triggerElement: ".trigger",
  duration: 500
})
.setTween(tl)
.addTo(controller);

Использование timeline позволяет создавать комплексные эффекты без необходимости создавать отдельные сцены для каждого элемента.

Ключевые параметры tween в ScrollMagic

  • ease — функция сглаживания анимации (power1.inOut, linear, elastic.out).
  • overwrite — управляет конфликтами анимаций одного элемента.
  • paused — позволяет задать начальное состояние анимации.
gsap.to(".box", {
  x: 300,
  rotation: 180,
  duration: 2,
  ease: "power2.out",
  paused: true
});

Затем привязка к ScrollMagic:

scene.setTween(tween);

Отладка сцен

ScrollMagic поддерживает визуальный дебаг:

scene.addIndicators({
  name: "Example",
  colorTrigger: "blue",
  colorStart: "green",
  colorEnd: "red"
});
  • Показывает позиции triggerElement, начало и конец сцены.
  • Полезно при работе с длинными и сложными анимациями.

Практические советы

  • Для плавных анимаций всегда использовать GSAP timeline, особенно если несколько элементов анимируются последовательно.
  • Минимизировать использование setPin для больших блоков, чтобы избежать торможения прокрутки.
  • duration сцены можно задавать в пикселях или проценте высоты окна, комбинируя с медиазапросами для адаптивного дизайна.
  • Если анимация не запускается, проверить порядок подключения скриптов: GSAP → ScrollMagic → animation.gsap.

Комбинация с другими плагинами

  • Можно использовать ScrollMagic.Scene.addIndicators() совместно с GSAP для отладки сложных таймлайнов.

  • ScrollMagic совместим с плагинами GSAP (ScrollTrigger можно применять в проектах с ScrollMagic для дополнительных возможностей).

  • Пример комплексного эффекта: параллакс + появление + вращение:

const tl = gsap.timeline();
tl.from(".image", { y: 100, opacity: 0, duration: 1 });
tl.to(".image", { rotation: 15, duration: 1 });

new ScrollMagic.Scene({
  triggerElement: ".section",
  duration: 800
})
.setTween(tl)
.setPin(".section")
.addIndicators()
.addTo(controller);

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

Оглавление