Горизонтальный скролл

GSAP (GreenSock Animation Platform) предоставляет гибкие средства для создания сложных анимаций, включая анимации прокрутки. Горизонтальный скролл реализуется с помощью ScrollTrigger, который позволяет синхронизировать анимацию с прокруткой страницы, а также с помощью методов управления свойствами объектов.

Создание контейнера для горизонтального скролла

Для реализации горизонтальной прокрутки создаётся контейнер с фиксированной высотой и шириной, превышающей ширину видимой области. Элементы внутри располагаются в ряд с использованием CSS:

.scroll-container {
  display: flex;
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
}

.scroll-item {
  flex: 0 0 auto;
  width: 100vw;
  height: 100vh;
}

Такой подход позволяет контролировать движение всех элементов внутри контейнера с помощью анимации смещения по оси X.

Анимация горизонтального скролла

Для горизонтальной анимации используется метод gsap.to() с параметром x или xPercent, совместно с ScrollTrigger. Например:

gsap.registerPlugin(ScrollTrigger);

const container = document.querySelector(".scroll-container");
const items = gsap.utils.toArray(".scroll-item");

gsap.to(items, {
  xPercent: -100 * (items.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: container,
    pin: true,
    scrub: 1,
    end: () => "+=" + container.offsetWidth
  }
});

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

  • xPercent — используется для смещения элементов относительно их ширины, что упрощает адаптивность.
  • pin: true фиксирует контейнер на экране во время прокрутки.
  • scrub: 1 связывает скорость анимации с прокруткой страницы.
  • end рассчитывается динамически, чтобы анимация завершалась после полной прокрутки всех элементов.

Плавное движение и контроль скорости

Параметр scrub может быть числом или true. Значение true делает движение полностью синхронизированным с прокруткой, а числовое значение добавляет эффект инерции.

scrollTrigger: {
  trigger: container,
  pin: true,
  scrub: 0.5
}

Адаптивная настройка

Для корректной работы на разных устройствах важно учитывать динамическую ширину контейнера. Использование xPercent вместо фиксированных пикселей упрощает адаптивность.

Если контейнер содержит изображения или динамически создаваемые элементы, перед запуском анимации необходимо дождаться их загрузки:

window.addEventListener("load", () => {
  // запуск анимации после полной загрузки
});

Сложные сценарии: множественные секции

Для реализации последовательного горизонтального скролла нескольких секций можно использовать gsap.timeline():

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: container,
    pin: true,
    scrub: 1,
    end: () => "+=" + container.scrollWidth
  }
});

tl.to(".section1", { xPercent: -100 })
  .to(".section2", { xPercent: -200 })
  .to(".section3", { xPercent: -300 });

Преимущества использования timeline:

  • Возможность добавлять задержки между секциями.
  • Лёгкая интеграция с другими эффектами, например масштабированием или изменением opacity.
  • Полный контроль над порядком анимаций.

Совмещение с другими анимациями

GSAP позволяет комбинировать горизонтальный скролл с другими визуальными эффектами. Например, добавление масштабирования и прозрачности при движении:

gsap.to(".scroll-item", {
  xPercent: -100 * (items.length - 1),
  scale: 0.8,
  opacity: 0.7,
  ease: "power1.out",
  scrollTrigger: {
    trigger: container,
    pin: true,
    scrub: true,
    end: () => "+=" + container.scrollWidth
  }
});

Использование snap для эффектов перелистывания

Для создания ощущения «перелистывания» можно использовать свойство snap:

scrollTrigger: {
  trigger: container,
  pin: true,
  scrub: 1,
  end: () => "+=" + container.scrollWidth,
  snap: 1 / (items.length - 1)
}

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

Производительность

  • Использование xPercent вместо x уменьшает нагрузку на рендеринг.
  • Фиксация контейнера (pin) требует GPU-ускорения, поэтому рекомендуется применять transform: translate3d(0,0,0) через GSAP или CSS.
  • Ограничение количества одновременных анимируемых свойств повышает плавность прокрутки.

Горизонтальный скролл с GSAP сочетает контроль, плавность и адаптивность. Использование ScrollTrigger, xPercent и timeline позволяет создавать сложные визуальные эффекты с минимальным количеством кода и высокой производительностью.

Оглавление