Подключение GreenSock

Для эффективного использования ScrollMagic в сочетании с анимациями важно правильно подключить библиотеку GreenSock (GSAP). GSAP предоставляет мощный инструмент для создания анимаций, который ScrollMagic использует через свои сцены для управления движением элементов при прокрутке страницы.

Подключение через CDN

Наиболее простой способ интеграции GSAP — использование CDN. Необходимо подключить core-библиотеку GSAP и при необходимости дополнительные плагины, например, ScrollTrigger или CSSPlugin. Пример подключения:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.14.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.14.0/ScrollTrigger.min.js"></script>

Важно подключать GSAP до инициализации ScrollMagic, чтобы можно было использовать анимации внутри сцен.

Установка через npm

Для проектов на Node.js или при использовании сборщиков модулей (Webpack, Parcel, Vite) GSAP устанавливается через npm:

npm install gsap

После установки можно импортировать библиотеку в коде:

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

Регистрация плагина ScrollTrigger необходима, если планируется использование анимаций с привязкой к скроллу.

Интеграция GSAP с ScrollMagic

ScrollMagic сам по себе не выполняет анимации, он управляет триггерами и сценами. Для анимаций элементов при прокрутке используется GSAP. Основной принцип интеграции:

  1. Создание контроллера ScrollMagic:
const controller = new ScrollMagic.Controller();
  1. Создание сцены, которая управляет анимацией:
const tween = gsap.to(".box", { duration: 1, x: 300, rotation: 360 });

const scene = new ScrollMagic.Scene({
  triggerElement: ".trigger",
  duration: 500,
  triggerHook: 0.5
})
.setTween(tween)
.addTo(controller);

Ключевые параметры сцены:

  • triggerElement — элемент, с которого начинается анимация.
  • duration — длина анимации относительно прокрутки (в пикселях или процентах страницы).
  • triggerHook — точка на экране, где срабатывает триггер (0 — верх экрана, 1 — низ экрана).

Использование нескольких анимаций

GSAP позволяет объединять несколько анимаций в таймлайны, что особенно удобно при работе со ScrollMagic:

const timeline = gsap.timeline();
timeline.to(".box1", { x: 200, opacity: 0.5, duration: 1 });
timeline.to(".box2", { y: 100, scale: 1.5, duration: 1 });

const scene = new ScrollMagic.Scene({
  triggerElement: ".trigger",
  duration: 600
})
.setTween(timeline)
.addTo(controller);

Использование таймлайнов позволяет синхронизировать последовательные анимации и упрощает управление сложными эффектами.

Анимации с обратной прокруткой

По умолчанию ScrollMagic воспроизводит анимацию в прямом и обратном направлении при прокрутке вверх и вниз. Для анимаций, которые должны останавливаться или повторяться, можно использовать опцию reverse:

const scene = new ScrollMagic.Scene({
  triggerElement: ".trigger",
  duration: 400,
  reverse: false // Анимация выполняется только один раз
})
.setTween(gsap.to(".box", { x: 200, duration: 1 }))
.addTo(controller);

Контроль анимации при динамическом контенте

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

controller.update(true);

Это гарантирует правильное вычисление позиции триггеров и синхронизацию анимаций.

Поддержка современных методов

GSAP 3 и ScrollMagic поддерживают современную синтаксическую интеграцию:

  • Использование стилей CSS напрямую в GSAP (gsap.to(".box", { x: 100, opacity: 0.5 }))
  • Поддержка мобильного и адаптивного поведения
  • Возможность использования медиазапросов через ScrollTrigger.matchMedia

Рекомендации по производительности

  • Использовать GSAP таймлайны вместо множества отдельных анимаций.
  • Минимизировать количество DOM-элементов с триггерами.
  • Использовать will-change: transform для анимируемых элементов, чтобы включить аппаратное ускорение.
  • Подключать GSAP через локальный бандл для оффлайн-проектов и уменьшения задержки загрузки.

Итоговая структура подключения

<!-- GSAP Core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.14.0/gsap.min.js"></script>

<!-- GSAP ScrollTrigger (если нужен) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.14.0/ScrollTrigger.min.js"></script>

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

Эта комбинация обеспечивает полный контроль над анимациями при скролле, позволяя создавать плавные, отзывчивые и сложные эффекты на любой странице.

Оглавление