ScrollTrigger — это модуль в GSAP, который связывает анимации с прокруткой страницы. Он позволяет запускать эффекты не по таймеру, а когда пользователь достигает определённой точки на странице или меняет положение скролла. Это делает контент интерактивным: элементы появляются, двигаются или меняют вид именно тогда, когда они нужны пользователю.

Что такое ScrollTrigger и зачем он нужен в GSAP

Это делает контент интерактивным: элементы появляются, двигаются или меняют вид именно тогда, когда они нужны пользователю. Например, текст может выезжать снизу при прокрутке вниз, а фон — менять цвет при приближении к секции.

Без ScrollTrigger вы ограничены таймерами и событиями клика. С ним анимация привязана к позиции элемента в DOM относительно окна просмотра. Это критично для лендингов, где контент должен раскрываться постепенно, а не появляться сразу или исчезать до того, как пользователь его увидел.

Основные принципы работы с прокруткой (pinning, scrubbing, triggers)

Три ключевых понятия: trigger, pin и scrub. Trigger — это точка на странице, где начинается анимация. По умолчанию это верхний край элемента. Вы можете изменить её через параметр start.

Pinning (закрепление) фиксирует элемент в одном месте при прокрутке. Это создаёт эффект параллакса или позволяет показать контент за пределами видимости окна. Например, закрепленная секция с видео на фоне, пока пользователь листает список товаров.

Scrubbing связывает анимацию с ползунком скролла. Анимация идет не от начала до конца автоматически, а реагирует на движение мыши вверх-вниз. Параметр scrub: 1 привязывает прогресс анимации к позиции прокрутки.

Пошаговая настройка первой анимации: от HTML до JS

Шаг 1. Подключение. Включите модуль через gsap.registerPlugin(ScrollTrigger). Это необходимо для использования функций ScrollTrigger.

Шаг 2. Подготовка HTML. Создайте контейнер и элемент, который нужно анимировать. Убедитесь, что у элемента есть уникальные классы или ID.

Шаг 3. Настройка анимации. Используйте gsap.from(), to() или set(). Укажите параметры: duration (длительность), ease (плавность), scrollTrigger.start (когда начать), scrollTrigger.end (где закончить).

Пример кода:

gsap.from('.my-element', {

y: 100,

opacity: 0,

duration: 1,

ease: 'power2.out',

scrollTrigger: {

trigger: '.my-element',

start: 'top center',

toggleActions: 'play none none reverse'

}

});

Критерии выбора типа анимации под задачу пользователя

Выбирайте тип анимации исходя из цели. Если нужно просто показать контент — используйте fade-in (появление). Если нужно удержать внимание на секции — применяйте pinning.

Для длинных страниц с текстом лучше использовать staggered animations (каскадное появление), чтобы не перегружать глаз сразу всем блоком.

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

Типичные ошибки при работе с ScrollTrigger и способы их устранения

Ошибка 1: Анимация запускается слишком рано. Решение — настройте start: 'top center' или используйте offset для смещения точки начала.

Ошибка 2: Элемент исчезает после анимации. Проверьте toggleActions. Установите 'play none none reverse', чтобы анимация повторялась при возврате скролла.

Ошибка 3: Анимация не работает на мобильных. Убедитесь, что высота контейнера задана явно (например, через vh или min-height), иначе ScrollTrigger не сможет определить область прокрутки.

Ошибка 4: Конфликт с другими библиотеками. Если используете jQuery или другие плагины скролла, убедитесь, что они не конфликтуют с событиями окна.

Ограничения библиотеки и условия корректной работы

ScrollTrigger работает только внутри контекста прокрутки. Если элемент находится в iframe без возможности скролла, анимация не сработает.

Для корречной работы необходимо задать высоту контейнера или использовать flexbox/grid для определения размеров.

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

Если вы используете динамически создаваемый контент, убедитесь, что ScrollTrigger инициализируется после добавления элементов в DOM.

Вопросы и ответы

Можно ли использовать ScrollTrigger без GSAP?

Нет. ScrollTrigger — это модуль GSAP. Для работы требуется подключить саму библиотеку GSAP и зарегистрировать этот плагин.

Как сделать анимацию, которая работает только один раз при прокрутке вниз?

Установите toggleActions: 'play none none reverse' и используйте start: 'top center'. Это позволит анимации сработать при первом появлении элемента.

Как отладить ScrollTrigger, если анимация не работает?

Используйте консоль браузера. Включите режим отладки в GSAP (если подключен) или проверьте, правильно ли заданы параметры start и trigger.

gsap.from('.my-element', {
  y: 100,
  opacity: 0,
  duration: 1,
  ease: 'power2.out',
  scrollTrigger: {
    trigger: '.my-element',
    start: 'top center',
    toggleActions: 'play none none reverse'
  }
});

Как создавать scroll-анимации с GSAP ScrollTrigger