Цепочки методов

ScrollMagic предоставляет гибкую систему управления анимациями и сценами с помощью цепочек методов (method chaining). Этот подход позволяет создавать сложные взаимодействия с минимальным количеством кода, последовательно вызывая методы объектов Scene и Controller.

Принцип работы цепочек методов заключается в том, что каждый метод объекта возвращает сам объект, что позволяет вызывать следующий метод сразу после предыдущего. Например:

var scene = new ScrollMagic.Scene({ duration: 200, triggerElement: "#trigger" })
    .setTween("#animate", { x: 100, opacity: 0.5 })
    .addIndicators({ name: "My Scene" })
    .addTo(controller);

В этом примере все методы возвращают объект сцены, создавая удобный поток настройки.

Методы, поддерживающие цепочки

setTween() Привязывает анимацию к сцене. Может принимать объекты анимации GSAP, CSS-анимации или функции обратного вызова. Возвращает объект сцены, что позволяет продолжить цепочку.
```
scene.setTween(TweenMax.to("#animate", 1, { x: 100, opacity: 0.5 }));
```
setPin() Закрепляет элемент на экране при прокрутке сцены. Может принимать параметры pushFollowers и spacerClass.
```
scene.setPin("#pinElement", { pushFollowers: false });
```
addTo() Добавляет сцену в контроллер ScrollMagic. Возвращает сцену для дальнейшей настройки.
```
scene.addTo(controller);
```
addIndicators() Используется для визуальной отладки. Позволяет отображать индикаторы триггеров и длительности сцены.
```
scene.addIndicators({ name: "Example Scene" });
```
on() и off() Добавляют и удаляют обработчики событий (start, end, enter, leave). Можно продолжать цепочку после вызова on():
```
scene.on("enter", function () {
    console.log("Элемент вошел в сцену");
});
```

Примеры сложных цепочек

Комбинация анимации и закрепления

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({ duration: 300, triggerElement: "#trigger" })
    .setPin("#pinElement")
    .setTween("#animate", { x: 200, rotation: 45 })
    .addIndicators({ name: "Pin & Animate" })
    .addTo(controller)
    .on("enter", function () { console.log("Сцена началась"); });

В этом примере элемент закрепляется на экране, а анимация применяется одновременно с событием входа в сцену. Все вызовы объединены в одну цепочку.

Цепочка с динамическими параметрами

var scene = new ScrollMagic.Scene()
    .setDuration(() => window.innerHeight / 2)
    .setTrigger("#dynamicTrigger")
    .setTween(TweenMax.to("#dynamicElement", 1, { y: 150 }))
    .addTo(controller);

Использование функции в setDuration() позволяет задавать длительность сцены динамически, сохраняя цепочку методов неизменной.

Преимущества цепочек методов

Компактность кода: настройки сцены выполняются последовательно, без необходимости многократного присваивания переменных.
Читаемость: легко проследить последовательность действий, особенно при сложных анимациях.
Универсальность: один и тот же объект сцены можно последовательно настраивать для разных целей — анимация, закрепление, события, индикаторы.