Production build

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

Минификация и объединение скриптов

ScrollMagic предоставляет основной файл библиотеки (ScrollMagic.js) и несколько расширений, таких как debug.addIndicators.js для разработки и animation.gsap.js для интеграции с GSAP. В production версии следует использовать минифицированный основной скрипт и подключать только необходимые плагины.

Пример подключения через HTML:

<script src="js/ScrollMagic.min.js"></script>
<script src="js/animation.gsap.min.js"></script>

Важно исключить debug.addIndicators.js из production, так как он добавляет визуальные маркеры и увеличивает размер бандла.

Интеграция с бандлерами

При использовании Webpack, Rollup или Parcel рекомендуется импортировать ScrollMagic через npm-пакет:

import ScrollMagic from 'scrollmagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

Для production следует использовать минифицированные версии модулей или настроить бандлер на автоматическую минификацию:

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true
  }
};

Отключение индикаторов и логирования

Метод addIndicators() и включение loglevel используются только для разработки. В production их следует полностью убрать, чтобы не перегружать DOM и не показывать пользователю внутренние сообщения.

// Development
new ScrollMagic.Scene({
  triggerElement: '#section1',
  duration: 500
})
.addIndicators({ name: 'section1' })
.addTo(controller);

// Production
new ScrollMagic.Scene({
  triggerElement: '#section1',
  duration: 500
})
.addTo(controller);

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

ScrollMagic активно манипулирует DOM при скролле. В production необходимо соблюдать следующие рекомендации:

  • Использовать requestAnimationFrame внутри колбэков анимаций, особенно при привязке к onUpdate или onEnter.
  • Минимизировать количество сцен, объединяя несколько триггеров на один элемент, если это возможно.
  • Избегать дорогостоящих операций в onUpdate (например, вычисление стилей или сложные DOM-операции).
  • Закэшировать DOM-элементы:
const section = document.querySelector('#section1');

new ScrollMagic.Scene({
  triggerElement: section,
  duration: 500
})
.addTo(controller);

Ленивая инициализация сцен

В production рекомендуется создавать сцены только для элементов, которые реально будут отображены на странице. Это снижает нагрузку на браузер и сокращает количество активных слушателей скролла.

const sections = document.querySelectorAll('.animate-section');

sections.forEach(section => {
  if (section.offsetHeight > 0) { // элемент видим
    new ScrollMagic.Scene({
      triggerElement: section,
      duration: 300
    })
    .addTo(controller);
  }
});

Использование GSAP и Timeline для Production

Интеграция с GSAP позволяет создавать более сложные анимации без существенного увеличения кода ScrollMagic. В production важно:

  • Минимизировать количество отдельных Tween объектов, объединяя их в Timeline.
  • Использовать gsap.min.js вместо не минифицированной версии.
  • Ограничить использование тяжелых анимаций на мобильных устройствах для повышения производительности.
import { gsap } from 'gsap';

const tl = gsap.timeline();
tl.to('#box', { x: 300, duration: 1 })
  .to('#box', { y: 100, duration: 0.5 });

new ScrollMagic.Scene({
  triggerElement: '#trigger',
  duration: 500
})
.setTween(tl)
.addTo(controller);

Контроль событий

Для production стоит отключать все события, используемые исключительно для дебага (onStart, onEnd, onUpdate с console.log). Если необходимы колбэки, стоит оптимизировать их выполнение и использовать делегирование или throttle/debounce для уменьшения нагрузки.

scene.on('update', () => {
  // Легкая функция без дорогостоящих вычислений
});

Поддержка разных устройств

ScrollMagic учитывает высоту viewport для триггеров. В production важно:

  • Проверять корректность работы на мобильных и десктопных устройствах.
  • Использовать медиазапросы для изменения параметров сцены (duration, offset) на разных экранах.
const isMobile = window.innerWidth < 768;

new ScrollMagic.Scene({
  triggerElement: '#section',
  duration: isMobile ? 300 : 600
})
.addTo(controller);

Минимизация веса и загрузки

  • Подключать ScrollMagic только один раз, не дублировать скрипты.
  • Использовать асинхронную загрузку: defer или динамический импорт.
  • Исключать ненужные плагины в production.
<script src="js/ScrollMagic.min.js" defer></script>

Эти практики обеспечивают плавную работу скролл-анимаций, снижение нагрузки на браузер и правильное отображение контента в production сборке проекта с ScrollMagic.

Оглавление