Последовательное появление изображений

Библиотека ScrollMagic позволяет создавать анимации, которые зависят от прокрутки страницы, что делает возможным плавное и динамичное появление элементов на экране. Для последовательного появления изображений ключевым инструментом является создание сцен (Scene) и использование триггеров (triggerElement), контролирующих момент начала анимации.

Настройка ScrollMagic

Для начала необходимо подключить ScrollMagic и, при необходимости, GSAP для более гибких анимаций:

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

Создание контроллера, который будет управлять сценами:

const controller = new ScrollMagic.Controller();

Контроллер необходим для регистрации всех сцен на странице и управления их поведением при скролле.

Создание сцены для одного изображения

Чтобы изображение плавно появлялось при прокрутке, используется следующая схема:

const image = document.querySelector('.image-1');

const scene = new ScrollMagic.Scene({
  triggerElement: image,
  triggerHook: 0.8, // Срабатывает, когда элемент почти виден на экране
  reverse: false     // Анимация проигрывается только один раз
})
.setTween(gsap.from(image, {opacity: 0, y: 50, duration: 1}))
.addTo(controller);

Ключевые моменты:

  • triggerElement – элемент, при появлении которого на экране запускается анимация.
  • triggerHook – позиция на экране (от 0 до 1), где происходит срабатывание. 0 — верх экрана, 1 — низ.
  • reverse – управляет повторением анимации при скролле назад. Для последовательного появления обычно ставится false.
  • setTween – связывает сцену с анимацией GSAP.

Последовательное появление нескольких изображений

Для организации последовательного появления необходимо создать несколько сцен, по одной на каждое изображение. Использование массивов и циклов позволяет автоматизировать процесс:

const images = document.querySelectorAll('.sequence-image');

images.forEach((img, index) => {
  new ScrollMagic.Scene({
    triggerElement: img,
    triggerHook: 0.8,
    reverse: false
  })
  .setTween(gsap.from(img, {opacity: 0, y: 50, duration: 1, delay: index * 0.2}))
  .addTo(controller);
});

Объяснение:

  • Цикл перебирает все изображения, присваивая каждой сцене индивидуальную задержку delay, что создаёт эффект последовательного появления.
  • y: 50 задаёт смещение по вертикали, делая анимацию более динамичной.

Комбинирование с временными линиями GSAP

Для сложных последовательностей можно использовать timeline GSAP:

const tl = gsap.timeline();

images.forEach(img => {
  tl.from(img, {opacity: 0, y: 50, duration: 0.8});
});

new ScrollMagic.Scene({
  triggerElement: '.images-container',
  triggerHook: 0.5,
  reverse: false
})
.setTween(tl)
.addTo(controller);

Преимущества:

  • Позволяет точно контролировать порядок появления и интервалы между анимациями.
  • Timeline упрощает редактирование: изменение длительности или порядка элементов не требует пересоздания отдельных сцен.

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

ScrollMagic автоматически адаптируется к разной высоте экрана, но для лучшего контроля:

  • offset – смещение триггера от верхнего края элемента:
triggerElement: img,
offset: 100 // Начало анимации на 100px выше элемента
  • duration – длина сцены, полезна для создания эффектов «прохода» через элемент:
duration: 200 // Анимация длится в течение 200px прокрутки

Эти параметры позволяют сделать появление изображений плавным и естественным, независимо от размера экрана или скорости скролла.

Практические рекомендации

  • Использовать reverse: false для последовательных галерей, чтобы анимации не проигрывались повторно при скролле вверх.
  • Для эффектов «всплывания» и «появления снизу» чаще всего комбинируются свойства opacity и y.
  • Timeline предпочтителен для сложных последовательностей, особенно если необходимо синхронизировать появление нескольких элементов с различными эффектами.
  • Для больших коллекций изображений можно использовать ленивую загрузку (lazy-loading) и запуск анимации только при приближении к экрану, чтобы снизить нагрузку на страницу.

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

  • Минимизировать количество сцен, объединяя несколько анимаций в одну timeline.
  • Использовать will-change: transform, opacity; в CSS для анимируемых элементов, чтобы браузер заранее оптимизировал их рендеринг.
  • Для мобильных устройств можно уменьшить длительность анимаций и отключить смещения, чтобы избежать лагов при прокрутке.

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

Оглавление