Словами самого skill
ScrollTrigger — это плагин GSAP для анимации, привязанной к скроллу: запуск tweens и timelines в определённых позициях скролла, закрепление (pinning) секций, привязка прогресса к скроллу (scrub) и продвижение timeline через диапазон start/end.
В нём полностью изложен словарь конфигурации — trigger, start/end, включая clamp() и относительные значения, endTrigger, scrub, toggleActions, pin и pinSpacing, snap, scroller, id, refreshPriority — а также добавлены ScrollTrigger.batch() для поочерёдных появлений, приходящих вместе, scrollerProxy() для сторонних плавных скроллеров и containerAnimation для имитации горизонтального скролла. Значения по умолчанию указаны для каждой опции, наряду с чек-листом лучших практик и явным списком запретов, охватывающим очистку в React, порядок refresh, ease и оставшиеся маркеры.
Что он выдаёт
- Tween или timeline, чей прогресс привязан к позиции скролла через диапазон start-to-end триггера.
- Самостоятельный ScrollTrigger, созданный без связанного tween, используемый с callbacks для кастомного поведения, например обновления UI из self.progress.
- Массив (Array) экземпляров ScrollTrigger, по одному на каждую цель batch, возвращаемый ScrollTrigger.batch().
- Вложенные твины, срабатывающие на основе горизонтального смещения, создаваемого твином containerAnimation.
Как это работает
- 01Зарегистрируйте плагин один раз
ScrollTrigger поставляется как плагин, а не как часть базового API анимации, поэтому его регистрируют один раз после загрузки скрипта, до выполнения любой конфигурации scrollTrigger.
- 02Подключите конфигурацию scrollTrigger
Твин или таймлайн получает объект scrollTrigger, в котором указан триггерный элемент, а также start и end, описывающие положение триггера относительно вьюпорта.
- 03Выберите, как скролл управляет плейхедом
Scrub непрерывно связывает прогресс с позицией скролла, опционально с числовой задержкой догона, тогда как toggleActions запускает дискретные действия play/reverse в четырёх точках пересечения.
- 04Закрепите секцию и привяжите таймлайн через scrub
Пиннинг удерживает триггерный элемент, пока диапазон активен, а таймлайн, привязанный к этому ScrollTrigger, продвигает свои дочерние элементы по тому же участку от start до end.
- 05Объедините элементы, появляющиеся одновременно, в batch
ScrollTrigger.batch() создаёт по одному ScrollTrigger на каждую цель и собирает их коллбэки в течение короткого интервала, чтобы элементы, появляющиеся почти одновременно, можно было анимировать со сдвигом (stagger) за один вызов.
- 06Уничтожайте инстансы, когда контент исчезает
Удаление анимированных элементов или смена страниц, как в одностраничном приложении, требует уничтожения связанных инстансов, чтобы они не продолжали работать с устаревшими элементами.