toggleActions: управление поведением

Свойство toggleActions используется для управления поведением анимаций при взаимодействии с триггером в ScrollTrigger или аналогичных системах, основанных на событиях. Оно позволяет задавать последовательность действий для анимации в зависимости от того, входит ли элемент в зону видимости, выходит из неё или возвращается обратно.

Формат записи:

toggleActions: "play pause resume reset"

Здесь четыре ключевых действия соответствуют последовательности:

  1. onEnter — действие, выполняемое, когда элемент появляется в зоне триггера.
  2. onLeave — действие при выходе элемента за пределы зоны.
  3. onEnterBack — действие при возвращении элемента в зону видимости с обратного направления.
  4. onLeaveBack — действие при уходе элемента обратно за пределы триггера в противоположном направлении.

Возможные значения действий

Каждое из четырёх действий может принимать одно из следующих значений:

  • play — воспроизведение анимации с текущей позиции или с начала, если анимация не была запущена.
  • pause — приостановка текущей анимации.
  • resume — продолжение анимации с текущей позиции.
  • reverse — воспроизведение анимации в обратном направлении.
  • restart — запуск анимации с начала вне зависимости от текущей позиции.
  • reset — возврат анимации к исходному состоянию.
  • complete — мгновенное завершение анимации.
  • none — отсутствие действия, проигнорировать событие.

Примеры использования

  1. Стандартная анимация при скролле вниз и вверх:
gsap.to(".box", {
  x: 400,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom center",
    toggleActions: "play reverse play reverse"
  }
});

В этом примере:

  • При входе элемента в зону — запускается анимация (play).
  • При выходе из зоны — анимация идёт в обратную сторону (reverse).
  • При возврате в зону с обратного направления — снова воспроизведение (play).
  • При уходе обратно за пределы зоны — снова реверс (reverse).
  1. Анимация с остановкой при уходе:
gsap.to(".circle", {
  rotation: 360,
  scrollTrigger: {
    trigger: ".circle",
    start: "top 80%",
    end: "bottom 20%",
    toggleActions: "play pause resume reset"
  }
});

Здесь поведение:

  • play — при входе в зону.
  • pause — при выходе.
  • resume — при возврате обратно.
  • reset — при уходе обратно.

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

  • Комбинирование действий: toggleActions позволяет создавать сложные сценарии скролл-анимаций без необходимости вручную отслеживать события.
  • Оптимизация производительности: для тяжелых анимаций рекомендуется использовать pause или reset при уходе из зоны, чтобы снизить нагрузку на рендеринг.
  • Совместимость с timeline: при использовании анимаций, объединённых в timeline, toggleActions может управлять всей последовательностью целиком, что удобно для синхронизации нескольких элементов.
  • Тестирование направлений скролла: важно проверять поведение onEnterBack и onLeaveBack, чтобы убедиться, что анимация корректно реагирует при прокрутке вверх.

Расширенные сценарии

Использование с различными точками старта и конца:

gsap.to(".image", {
  scale: 1.5,
  scrollTrigger: {
    trigger: ".image",
    start: "top 90%",
    end: "top 10%",
    toggleActions: "restart none none reverse"
  }
});
  • restart — при входе элемента анимация всегда начинается с начала.
  • none — при выходе из зоны, ничего не происходит.
  • none — при входе обратно, действия отсутствуют.
  • reverse — при уходе обратно в исходное положение анимация проигрывается в обратном направлении.

Комбинация с другими свойствами ScrollTrigger:

  • markers: true помогает визуально отследить старт и конец зоны триггера.
  • scrub: true позволяет синхронизировать анимацию с прокруткой, но toggleActions по-прежнему определяет начальные и конечные события.

Использование toggleActions делает GSAP особенно гибким для интерактивных интерфейсов, где анимация должна реагировать на скролл в обе стороны, управляться автоматически и оставаться предсказуемой. Такой подход значительно упрощает создание динамичных, отзывчивых веб-страниц без написания большого количества событийных обработчиков.

Оглавление