Удаление сцены

В ScrollMagic сцена (Scene) представляет собой объект, который связывает определённое событие прокрутки с анимацией или изменением состояния элементов на странице. В процессе разработки часто возникает необходимость удалять сцены — как полностью, так и частично, сохраняя при этом контроль над поведением страницы.

Методы удаления сцены

ScrollMagic предоставляет несколько способов для удаления сцены. Основные методы:

1. scene.destroy()

Метод destroy() полностью удаляет сцену, освобождая ресурсы и отменяя все привязки событий. Его синтаксис:

scene.destroy([reset]);
  • reset (boolean, опционально) — если true, сцена возвращает элементы к исходному состоянию перед уничтожением. По умолчанию false.

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

var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 200
})
.setClassToggle("#animate", "active")
.addTo(controller);

// Полное удаление сцены
scene.destroy(true); // элементы вернутся в исходное состояние

Особенности:

  • Удаляются все привязки к контроллеру.
  • Прекращаются все слушатели событий (start, end, enter, leave и т.д.).
  • Если сцена содержит таймлайны GSAP или другие анимации, они остаются на странице, но не управляются сценой.

2. controller.removeScene(scene)

Если требуется удалить сцену из контроллера, но оставить объект сцены доступным для возможного повторного добавления, используется метод контроллера:

controller.removeScene(scene);

Пример:

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger"
})
.addTo(controller);

// Удаление сцены из контроллера
controller.removeScene(scene);

Отличие от destroy():

  • removeScene() снимает сцену с контроллера, но сам объект остаётся в памяти.
  • Сцена может быть повторно добавлена с помощью controller.addScene(scene).
  • Не отменяет привязанные классы или анимации на элементах. Чтобы вернуть элементы в исходное состояние, нужно использовать scene.removeClassToggle() или ручное управление стилями.

Удаление нескольких сцен одновременно

ScrollMagic позволяет работать с массивами сцен:

var scenes = [scene1, scene2, scene3];

scenes.forEach(function(s) {
  s.destroy(true);
});

Если сцены находятся в контроллере, можно сначала получить все сцены и удалить их циклом:

controller = new ScrollMagic.Controller();
var allScenes = controller._sceneObjects; // внутренний массив, использовать осторожно

allScenes.forEach(function(s) {
  s.destroy(true);
});

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

Удаление привязок и классов

Иногда требуется удалить не всю сцену, а только эффекты:

Удаление класса

scene.removeClassToggle();
  • Удаляет привязку класса к элементу, но сцена остаётся активной.
  • Полезно для динамического изменения поведения сцены без её полного удаления.

Отмена анимации GSAP

Если сцена использует GSAP-анимации через setTween(), можно отключить их отдельно:

scene.setTween(null);
  • Сцена продолжает существовать, но анимация больше не запускается при прокрутке.
  • Можно задать новый tween в будущем без создания новой сцены.

Контроль событий перед удалением

Для аккуратного удаления сцены полезно отключить события:

scene.off("start end enter leave");
scene.destroy(true);
  • off() снимает все слушатели, что предотвращает возможные ошибки при удалении сцены в динамически изменяемом интерфейсе.
  • Комбинация off() и destroy(true) полностью очищает сцену и возвращает элементы к исходному состоянию.

Практическое использование

Удаление сцен актуально в следующих сценариях:

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

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

Оглавление