Режимы scrub: Boolean и Number

GSAP (GreenSock Animation Platform) предоставляет возможность синхронизации анимации с прокруткой страницы через плагин ScrollTrigger. Одним из ключевых параметров для такого взаимодействия является scrub. Этот параметр позволяет плавно связывать прогресс анимации с положением скролла, создавая эффект “прилипшей” анимации, которая движется вместе с прокруткой.

Scrub как Boolean

Когда scrub задан как true или false, его поведение кардинально отличается:

  • scrub: true Анимация становится строго синхронизированной с прокруткой. Прогресс анимации напрямую соответствует текущей позиции скролла между start и end триггера. Это означает, что при движении страницы вперед анимация воспроизводится, при движении назад — анимация возвращается к предыдущему состоянию.

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

    В этом примере .box будет двигаться на 500 пикселей по горизонтали в зависимости от текущей позиции прокрутки. При остановке прокрутки анимация также останавливается, а при обратной прокрутке — возвращается к исходному состоянию.

  • scrub: false (по умолчанию) Анимация запускается один раз при достижении триггера и не зависит от позиции скролла. Плавной синхронизации с прокруткой нет.

Scrub как Number

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

  • scrub: число Число определяет время в секундах, за которое анимация догоняет фактическую позицию скролла. Это позволяет создать эффект “инерции” и более мягкой синхронизации.

    gsap.to(".box", {
  y: 300,
  scrollTrigger: {
    trigger: ".container",
    start: "top center",
    end: "bottom center",
    scrub: 1.5
  }
});

    В этом случае анимация .box будет догонять позицию скролла с задержкой 1.5 секунды. Если прокрутка резко ускоряется, анимация плавно будет двигаться к соответствующей точке, создавая эффект плавного скольжения.

Отличия между Boolean и Number

  • Прямая синхронизация vs плавная задержка:

    • true — анимация повторяет каждый пиксель скролла без задержки.
    • число — анимация догоняет скролл постепенно, создавая эффект “инерции”.

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

  • Производительность: Использование числа для scrub может потребовать больше ресурсов, так как GSAP постоянно интерполирует текущий прогресс и применяет задержку. Boolean-задание требует минимальных вычислений.

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

  1. Для линейной синхронизации с прокруткой использовать scrub: true. Эффект идеален для точного контроля над анимацией.

  2. Для плавных, инерционных эффектов лучше использовать scrub: число. Важно подбирать значение числа в зависимости от желаемой мягкости. Например, 0.5–2 секунды — оптимальные диапазоны для большинства интерфейсов.

  3. Комбинирование с другими параметрами ScrollTrigger:

    • start и end определяют диапазон действия scrub.
    • markers: true помогают визуально отследить, как анимация синхронизируется с прокруткой.

Важные нюансы

  • При использовании числового scrub, анимация может “догонять” скролл, даже если пользователь резко прокручивает страницу. Это особенно важно учитывать при параллакс-эффектах или интерактивных интерфейсах.
  • Boolean scrub не создает инерции, поэтому анимации кажутся более “жёсткими”.
  • Scrub работает только с анимациями, которые имеют прогресс, то есть с gsap.to(), gsap.fromTo() и timeline анимациями.

Использование scrub делает ScrollTrigger мощным инструментом для синхронизации анимаций с прокруткой, позволяя создавать как жёсткие, линейные эффекты, так и плавные инерционные переходы. Определение scrub как Boolean или Number является ключевым решением для управления динамикой взаимодействия пользователя с интерфейсом.

Оглавление