Создание каскадных анимаций

Для работы с Locomotive Scroll необходимо подключить библиотеку. В современных проектах рекомендуется использовать установку через npm:

npm install locomotive-scroll

После установки библиотеку импортируют в проект:

import LocomotiveScroll from 'locomotive-scroll';
import 'locomotive-scroll/dist/locomotive-scroll.css';

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

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1.2,
  lerp: 0.1
});

Ключевые параметры:

  • el – контейнер с атрибутом data-scroll-container.
  • smooth – плавность прокрутки, true включает плавный скролл.
  • multiplier – коэффициент скорости прокрутки.
  • lerp – коэффициент интерполяции для сглаживания движения.

Основы работы с каскадными анимациями

Каскадные анимации (staggered animations) подразумевают последовательное проявление элементов с задержкой. В Locomotive Scroll это реализуется с помощью комбинации атрибутов data-scroll и CSS-переходов или библиотек типа GSAP.

Простейший пример с CSS-анимацией:


  
Элемент 1

  
Элемент 2

  
Элемент 3


.item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.item.is-inview {
  opacity: 1;
  transform: translateY(0);
}
scroll.on('call', (func, way, obj) => {
  if (func === 'animate') {
    obj.el.classList.add('is-inview');
  }
});

В этом примере каждый элемент проявляется при появлении в зоне видимости. Для создания каскада добавляют задержку через CSS:

.item:nth-child(1) { transition-delay: 0s; }
.item:nth-child(2) { transition-delay: 0.2s; }
.item:nth-child(3) { transition-delay: 0.4s; }

Интеграция с GSAP для сложных эффектов

Locomotive Scroll прекрасно сочетается с GSAP для более продвинутых анимаций. Для каскада используют gsap.timeline() с stagger:

import { gsap } from 'gsap';

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    scroller: '[data-scroll-container]',
    start: 'top 80%',
    end: 'bottom 20%',
    scrub: true
  }
});

tl.from('.item', {
  y: 50,
  opacity: 0,
  stagger: 0.2,
  duration: 0.6,
  ease: 'power2.out'
});

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

  • stagger задаёт интервал между анимациями элементов.
  • scrollTrigger интегрирует анимацию с прокруткой Locomotive Scroll.
  • scrub синхронизирует движение с прокруткой, создавая «живой» эффект.

Использование data-атрибутов для каскадного эффекта

Locomotive Scroll поддерживает кастомные атрибуты для вызова функций при прокрутке. Для каскадных анимаций удобно использовать data-scroll-call:

Элемент

В JS можно динамически обрабатывать элементы и задавать индивидуальные задержки:

scroll.on('call', (func, way, obj) => {
  if (func === 'stagger') {
    const delay = obj.el.dataset.delay || 0;
    setTimeout(() => {
      obj.el.classList.add('is-inview');
    }, delay * 1000);
  }
});
Элемент 1


Элемент 2


Элемент 3

Такой подход позволяет легко масштабировать каскад на любое количество элементов без правки CSS.

Сочетание вертикального и горизонтального скролла

Locomotive Scroll поддерживает горизонтальную прокрутку через data-scroll-direction="horizontal". Каскадные анимации при этом работают аналогично:


  
Элемент A

  
Элемент B

  
Элемент C

При горизонтальном скролле элементы можно анимировать по оси X:

.item {
  transform: translateX(50px);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.item.is-inview {
  transform: translateX(0);
  opacity: 1;
}

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

Для больших каскадов важно следить за производительностью:

  • Ограничивать количество элементов с анимацией в зоне видимости.
  • Использовать will-change: transform для ускорения рендеринга.
  • Минимизировать тяжелые JS-вычисления в обработчиках scroll.on('call').
  • Использовать requestAnimationFrame при необходимости динамической анимации.

Комбинация с парллакс-эффектами

Каскадные анимации можно совмещать с парллаксом через data-scroll-speed. Элементы с разной скоростью создают глубину:

Фон


Средний слой


Передний план

В GSAP или CSS-анимациях добавление задержки усилит эффект каскада, создавая гармоничное движение элементов на разных скоростях.

Оглавление