Тестирование на разных устройствах

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

Адаптация сцен под размеры экрана

ScrollMagic использует координаты и размеры элементов страницы для расчета триггеров анимаций. На мобильных устройствах высота окна браузера (window.innerHeight) может значительно отличаться от десктопной. Для корректной работы:

Использовать triggerHook в относительных единицах. Значение 0 соответствует верхней границе окна, 1 – нижней. Это обеспечивает адаптивность сцен независимо от высоты экрана:
```
var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    triggerHook: 0.8
})
.setClassToggle("#section", "visible")
.addTo(controller);
```
Пересчитывать размеры при изменении ориентации или ресайзе. Для мобильных устройств важно обновлять сцены после изменения размера окна:
```
window.addEventListener("resize", function() {
    controller.update(true);
});
```

Управление продолжительностью анимаций

Продолжительность (duration) сцены может быть фиксированной или зависеть от размеров элементов. На мобильных устройствах длина страницы может изменяться из-за скрытых/плавающих элементов интерфейса:

Динамическое вычисление duration:

var sectionHeight = document.querySelector("#section").offsetHeight;
var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    duration: sectionHeight
})
.setTween("#section .box", {opacity: 1, y: -50})
.addTo(controller);

Использование процентов от высоты окна для универсальности:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    duration: window.innerHeight * 0.7
});

Проверка производительности на мобильных устройствах

ScrollMagic работает поверх DOM и CSS-анимаций, что может создавать нагрузку на слабых устройствах:

Минимизировать количество одновременно активных сцен. Каждая сцена требует отслеживания скролла, а их большое количество приводит к снижению FPS.
Использовать аппаратное ускорение CSS-анимаций. Свойства transform и opacity выполняются GPU быстрее, чем изменение top или margin.
Отслеживать FPS и отзывчивость интерфейса. В мобильных браузерах полезно включать режим профилирования или использовать DevTools, чтобы проверить плавность анимаций.

Кросс-браузерные различия

Разные браузеры обрабатывают скролл и размеры элементов по-разному:

iOS Safari может изменять window.innerHeight при появлении клавиатуры или скрытии адресной строки.
Android Chrome иногда не сразу обновляет размеры элементов при динамической загрузке контента.
IE и старые версии Edge могут некорректно обрабатывать requestAnimationFrame, что влияет на плавность анимаций.

Для этих случаев рекомендуется:

Вызывать controller.update(true) после динамических изменений контента.
Использовать tweenChanges: true для плавного обновления tween при изменении параметров сцены:
```
var scene = new ScrollMagic.Scene({duration: 300, tweenChanges: true});
```

Тестирование на реальных устройствах

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

Ориентацию экрана: портрет и ландшафт.
Скролл жестами: плавность, отзывчивость элементов.
Динамически подгружаемый контент: lazy-loading изображений, AJAX-запросы, изменение размеров блоков.

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

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

scene.on("enter", function (event) {
    console.log("Сцена активирована", event.scrollDirection);
});
scene.on("leave", function (event) {
    console.log("Сцена деактивирована", event.scrollDirection);
});

Это позволяет увидеть момент срабатывания триггеров и корректно настроить triggerHook или duration.