Метод setTween

Метод setTween является ключевым инструментом библиотеки ScrollMagic для создания анимаций, привязанных к прокрутке страницы. Он позволяет связывать сцену (Scene) с анимацией, управляемой библиотеками типа GSAP (TweenMax, TweenLite, TimelineMax, TimelineLite) или с нативными CSS-свойствами через объект анимации.

Основной синтаксис

scene.setTween(tween, duration, params);

Где:

  • tween – объект анимации (например, созданный через gsap.to или gsap.from), либо объект с CSS-свойствами.
  • duration – опциональный параметр, задающий длительность анимации в пикселях прокрутки сцены (не применяется, если tween – это объект GSAP с Timeline).
  • params – объект с дополнительными настройками анимации (например, { ease: Power1.easeInOut }).

Пример использования с GSAP:

var tween = gsap.to("#box", { x: 300, rotation: 360, duration: 2 });

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

В этом примере объект #box будет двигаться и вращаться по мере прокрутки, пока сцена длиной 500 пикселей активна.

Использование с CSS-анимацией

Метод setTween может работать и с чистыми CSS-свойствами, без GSAP. В этом случае используется объект вида { property: value }.

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400
})
.setTween("#box", { opacity: 0, x: 200 })
.addTo(controller);

Здесь #box будет плавно смещаться по оси X и уменьшать прозрачность при прокрутке сцены.

Важно: для CSS-анимации ScrollMagic автоматически интерполирует значения свойств от текущего состояния до заданного. Это подходит для базовых трансформаций и прозрачности, но сложные анимации лучше реализовывать через GSAP.

Привязка анимации к прокрутке

setTween тесно интегрирован с ScrollMagic Scene. Сцена определяет:

  • Trigger – точку на странице, где начинается анимация.
  • Duration – длину участка прокрутки, в течение которого анимация выполняется.
  • Offset – смещение триггера относительно начала сцены.

Пример с использованием смещения:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 600,
    offset: 100
})
.setTween("#box", { scale: 2, rotation: 180 })
.addTo(controller);

В этом случае анимация начнется, когда верхняя граница триггерного элемента отступит на 100 пикселей от начала viewport, и продолжится на протяжении 600 пикселей прокрутки.

Использование Timeline для сложных анимаций

Если требуется последовательность анимаций, setTween может принимать Timeline от GSAP. Это позволяет комбинировать несколько действий в одном блоке.

var timeline = gsap.timeline();
timeline.to("#box", { x: 200, duration: 1 });
timeline.to("#box", { rotation: 360, duration: 1 });
timeline.to("#box", { scale: 1.5, duration: 1 });

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

Timeline обеспечивает плавное выполнение нескольких шагов анимации по мере прокрутки сцены. Каждая анимация автоматически синхронизируется с общей длительностью сцены.

Дополнительные возможности метода

  1. Обратное выполнение анимации При прокрутке назад метод setTween автоматически воспроизводит анимацию в обратном порядке.

  2. Лупинг и повторение Для Timeline можно использовать стандартные опции GSAP (repeat, yoyo) для создания циклических эффектов.

  3. Интеграция с ScrollMagic events Через .on("progress") или .on("enter") можно контролировать состояние tween вручную:

scene.on("progress", function(e) {
    console.log("Progress:", e.progress);
});

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

  • Использовать GSAP вместо CSS для сложных трансформаций и многослойных анимаций.
  • Минимизировать количество одновременно активных сцен с setTween, чтобы избежать просадки FPS.
  • Для анимаций с большим числом объектов лучше применять timeline, объединяя несколько tween’ов.

Особенности совместимости

  • ScrollMagic 2.x полностью совместим с GSAP 3.x через адаптацию старого синтаксиса (TweenMax → gsap.to/gsap.from).
  • Для мобильных устройств рекомендуется уменьшать длительность сцен, чтобы анимация оставалась плавной.

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

Оглавление