Концепция плавного скролла

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

Создание анимации прокрутки

Для базовой анимации можно использовать метод gsap.to, который изменяет свойство scrollTop элемента или документа:

gsap.to(window, {
  scrollTo: { y: "#target", offsetY: 50 },
  duration: 1.5,
  ease: "power2.out"
});

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

  • scrollTo — объект, позволяющий указывать целевую позицию прокрутки (y для вертикали, x для горизонтали).
  • offsetY — смещение от верхнего края окна, полезно для фиксированных заголовков.
  • duration — время анимации в секундах.
  • ease — функция плавности, позволяющая задавать инерцию движения.

Интеграция с ScrollTrigger

Для синхронизации анимаций с прокруткой применяется плагин ScrollTrigger:

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  x: 400,
  scrollTrigger: {
    trigger: ".container",
    start: "top center",
    end: "bottom top",
    scrub: true
  }
});

Пояснения:

  • trigger — элемент, относительно которого отслеживается скролл.
  • start и end — точки начала и окончания анимации в формате "позиция элемента позиция viewport".
  • scrub: true — синхронизация анимации с прокруткой, создающая эффект «тянущейся» анимации.

Scrub можно задавать числовым значением, например, scrub: 0.5, что добавляет легкую задержку, имитирующую инерцию.

Создание эффекта инерции

GSAP предоставляет возможность имитировать естественное замедление движения через ease и настройку scrub. Для более сложной инерции используется комбинация ScrollTrigger и GSAP’s ticker:

let scrollPos = 0;
let targetPos = 0;

gsap.ticker.add(() => {
  scrollPos += (targetPos - scrollPos) * 0.1;
  window.scrollTo(0, scrollPos);
});

window.addEventListener("scroll", () => {
  targetPos = window.scrollY;
});

Объяснение работы:

  • scrollPos постепенно приближается к targetPos с коэффициентом сглаживания (0.1).
  • Такой подход позволяет добавить «плавающий» эффект, когда движение отстает от фактической позиции скролла, создавая ощущение физической инерции.

Управление скоростью и ускорением

Для точной настройки скорости используются кривые Easing в GSAP:

  • power1, power2, power3, power4 — разные степени ускорения и замедления.
  • elastic, bounce — эффекты с пружинным или отскакивающим движением.
  • Пользователь может комбинировать ease с duration для создания динамичных эффектов, адаптированных под дизайн сайта.
gsap.to(window, {
  scrollTo: 0,
  duration: 2,
  ease: "power3.inOut"
});

Эта комбинация делает прокрутку одновременно плавной и предсказуемой.

Плавная прокрутка внутри контейнера

Прокрутка может быть применена не только к окну браузера, но и к отдельным элементам:

const container = document.querySelector(".scroll-container");

gsap.to(container, {
  scrollTo: { y: 300 },
  duration: 1,
  ease: "power2.out"
});

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

  • Поддерживается вертикальная и горизонтальная прокрутка (x и y).
  • Внутренние контейнеры с overflow: scroll позволяют создавать локальные эффекты, не влияя на глобальную страницу.

Комбинирование с другими анимациями

GSAP позволяет одновременно анимировать скролл и свойства элементов:

gsap.to(".image", {
  y: -100,
  opacity: 0.5,
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true
  }
});

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

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

  • Использовать will-change: transform для элементов, которые активно анимируются.
  • Ограничивать количество одновременных анимаций при скролле.
  • Применять requestAnimationFrame через GSAP ticker вместо прямого scroll обработчика для плавного обновления позиции.

Эти методы предотвращают «подергивание» и падение FPS при сложных сценариях.

Плавный скролл в GSAP — это сочетание точного управления позицией, гибкой настройки кривых инерции и синхронизации с прокруткой, что позволяет создавать интерактивные и отзывчивые интерфейсы с профессиональным уровнем анимации.

Оглавление