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

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

npm install locomotive-scroll

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

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

Инициализация происходит на элементе-контейнере, обычно <main> или <div class="scroll-container">:

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

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

  • el – DOM-элемент, к которому применяется прокрутка.
  • smooth – включает плавную прокрутку.
  • multiplier – коэффициент скорости прокрутки.
  • lerp – сглаживание движения, влияет на инерцию скролла.

Настройка структуры DOM

Для сложных анимаций важно правильно организовать HTML-структуру. Locomotive Scroll работает через data-атрибуты. Основные из них:

  • data-scroll – указывает элемент, на который будут применяться анимации.
  • data-scroll-speed – управляет скоростью движения относительно скролла.
  • data-scroll-direction – направление движения (vertical или horizontal).
  • data-scroll-sticky – делает элемент «липким» при прокрутке.

Пример структуры:

<div class="scroll-container" data-scroll-container>
  <section data-scroll-section>
    <div data-scroll data-scroll-speed="2">Элемент с ускорением</div>
    <div data-scroll data-scroll-speed="-1">Элемент с замедлением</div>
  </section>
</div>

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

  • Элементы с положительным data-scroll-speed будут двигаться быстрее, чем основной поток.
  • Элементы с отрицательным значением создают эффект параллакса в обратном направлении.

Использование событий скролла

Locomotive Scroll предоставляет мощный API для реакции на события прокрутки:

scroll.on('scroll', (event) => {
  console.log(event.scroll.y); // текущая позиция по Y
});

Дополнительно доступны события:

  • call – триггер для вызова функции на конкретном элементе с data-scroll-call.
  • scroll – общий контроль позиции скролла.
  • resize – реакция на изменение размеров окна.

Пример использования call для запуска анимации:

<div data-scroll data-scroll-call="fadeIn" data-scroll-repeat>
  Контент для анимации
</div>
scroll.on('call', (func, way, obj) => {
  if (func === 'fadeIn' && way === 'enter') {
    obj.el.classList.add('visible');
  }
});

Анимации с GSAP и Locomotive Scroll

Для сложных анимаций Locomotive Scroll часто используют совместно с GSAP. Важный момент — синхронизация скролла с GSAP:

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

scroll.on('scroll', ScrollTrigger.update);

gsap.to('.box', {
  x: 500,
  scrollTrigger: {
    trigger: '.box',
    scroller: '.scroll-container',
    start: 'top bottom',
    end: 'top top',
    scrub: true
  }
});

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

  • scroller указывает контейнер Locomotive Scroll, иначе GSAP использует стандартный скролл.
  • scrub: true позволяет анимации быть синхронизированной с прокруткой.
  • Использование событий Locomotive Scroll гарантирует точное положение элементов даже с инерцией и плавностью.

Эффекты параллакса и скорости

Для создания сложных визуальных эффектов можно комбинировать data-scroll-speed и GSAP:

gsap.utils.toArray('[data-scroll]').forEach(el => {
  const speed = el.dataset.scrollSpeed || 1;
  gsap.to(el, {
    y: (i, target) => -(scroll.scroll.instance.scroll.y * speed),
    ease: 'none',
    scrollTrigger: {
      trigger: el,
      scroller: '.scroll-container',
      start: 'top bottom',
      end: 'bottom top',
      scrub: true
    }
  });
});
  • Высокие значения data-scroll-speed создают эффект «летящих» элементов.
  • Отрицательные значения – ощущение движения в обратную сторону.
  • Совмещение с GSAP позволяет добавлять вращение, масштабирование и изменение прозрачности параллельно с движением.

Sticky элементы и сложные секции

Для реализации «липких» блоков используют data-scroll-sticky:

<div data-scroll data-scroll-sticky data-scroll-target="#section1">
  Липкий элемент
</div>
  • data-scroll-target указывает область действия sticky-эффекта.
  • При комбинировании с анимациями GSAP можно запускать трансформации только в зоне видимости.

Пример анимации sticky-элемента:

gsap.to('.sticky-box', {
  scale: 1.5,
  scrollTrigger: {
    trigger: '.sticky-box',
    scroller: '.scroll-container',
    start: 'top center',
    end: 'bottom center',
    scrub: true
  }
});

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

Сложные анимации требуют внимательного подхода:

  • Минимизировать количество DOM-элементов с data-scroll.
  • Использовать will-change: transform в CSS для анимируемых элементов.
  • Избегать тяжелых вычислений внутри событий scroll; использовать GSAP с scrub вместо ручного обновления стилей.
  • Для больших страниц применить requestAnimationFrame только при необходимости, полагаясь на встроенную инерцию Locomotive Scroll.

Пример комплексной секции

<section class="complex-section" data-scroll-section>
  <div class="parallax" data-scroll data-scroll-speed="3">Параллакс блок</div>
  <div class="fade" data-scroll data-scroll-call="fadeIn" data-scroll-repeat>Фейд-эффект</div>
  <div class="sticky-box" data-scroll data-scroll-sticky data-scroll-target=".complex-section">Липкий блок</div>
</section>
scroll.on('call', (func, way, obj) => {
  if (func === 'fadeIn' && way === 'enter') {
    gsap.to(obj.el, { opacity: 1, duration: 1 });
  }
});

gsap.to('.parallax', {
  y: 300,
  scrollTrigger: {
    trigger: '.parallax',
    scroller: '.scroll-container',
    scrub: true
  }
});

gsap.to('.sticky-box', {
  scale: 1.2,
  scrollTrigger: {
    trigger: '.sticky-box',
    scroller: '.scroll-container',
    start: 'top center',
    end: 'bottom center',
    scrub: true
  }
});

Такое сочетание data-scroll, sticky-элементов и GSAP позволяет создавать визуально сложные сцены, плавно реагирующие на движение пользователя, с параллаксом, изменением масштаба и прозрачности, полностью контролируемыми через API Locomotive Scroll и ScrollTrigger.

Оглавление