Удаление индикаторов в продакшене

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

Подключение ScrollMagic без индикаторов

Индикаторы подключаются через отдельный плагин debug.addIndicators.js. Для продакшена достаточно просто не подключать этот скрипт:

<!-- Скрипты для продакшена -->
<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>
<!-- Не подключаем debug.addIndicators.js -->

Даже если в коде вызываются методы addIndicators, они не будут работать без подключения плагина, что автоматически убирает визуальные индикаторы из страницы.

Условное подключение индикаторов

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

const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
});

// Добавляем индикатор только в режиме разработки
if (window.location.hostname === "localhost") {
    scene.addIndicators({ name: "My Scene" });
}

scene.setTween("#animate", { x: 100, opacity: 0.5 });
scene.addTo(controller);

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

Полное отключение индикаторов через функцию-обертку

Чтобы полностью исключить риски случайного отображения индикаторов в продакшене, можно создать вспомогательную функцию:

function addSceneIndicators(scene, name) {
    if (typeof ScrollMagic !== "undefined" && scene.addIndicators) {
        if (window.location.hostname === "localhost") {
            scene.addIndicators({ name: name });
        }
    }
}

// Использование
const myScene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400
});

addSceneIndicators(myScene, "Trigger Scene");
myScene.setTween("#animate", { y: 200, opacity: 1 });
myScene.addTo(controller);

Преимущество такого подхода — в продакшене код можно оставлять нетронутым, но индикаторы никогда не появятся.

Минификация и Tree Shaking

При сборке проекта через Webpack, Rollup или Vite можно дополнительно удалить код индикаторов:

  1. Не импортировать debug.addIndicators.js.
  2. Использовать условные конструкции для включения addIndicators.
  3. Минификация убирает неиспользуемый код плагина и уменьшает размер финального бандла.

Пример с ES-модулями:

import ScrollMagic from "scrollmagic";

// Подключаем индикаторы только для разработки
if (process.env.NODE_ENV === "development") {
    require("scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators");
}

Таким образом, индикаторы автоматически исключаются из продакшн-бандла.

Важные моменты

  • Индикаторы не влияют на логику анимации — они служат только для визуального дебага.
  • Любой вызов addIndicators без подключения плагина безопасен в продакшене.
  • Для крупных проектов рекомендуется централизованно управлять добавлением индикаторов через функцию-обертку или переменную окружения.
  • Не следует оставлять подключение debug.addIndicators.js в продакшен-бандле, чтобы не увеличивать вес страницы и не показывать ненужные элементы пользователям.

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

Оглавление