Эффекты при скролле страницы можно получить, отслеживая событие onscroll или используя IntersectionObserver API. Однако библиотека GSAP предлагает вам также интересный плагин с названием ScrollTrigger. Приготовьтесь к длительному чтению - здесь вы найдете параметры, события, возможные анимации и практические примеры для использования плагина GSAP ScrollTrigger на страницах сайта.
Подключаем плагин ScrollTrigger
Для того чтобы использовать плагин ScrollTrigger, его нужно подключить вместе с основной библиотекой GSAP. Ниже приведены ссылки на версию 3.12, но вы всегда можете найти новую версию на официальном сайте. Там же находится и документация по плагину ScrollTrigger.
| 1 2 3 4 5 6 7 8 9 | <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); // код для анимации </script> |
Для использования ScrollTrigger плагин нужно зарегистрировать строчкой gsap.registerPlugin(ScrollTrigger).
Если вы подключаете все скрипты в блоке <head> вашего html-файла, вам нужно еще будет добавить обработчик события DOMContentLoaded или onload:
| 1 2 3 4 5 6 7 8 9 10 11 | <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> <script> // код в существующем html-файе или внешнем JS файле document.addEventListener("DOMContentLoaded", (event) => { gsap.registerPlugin(ScrollTrigger) // код для анимации }); </script> |
Простое использование ScrollTrigger
Допустим у нас есть 3 элемента на странице, для которых вы хотите использовать анимацию с помощью GSAP метода to(), но эти элементы разделены на несколько экранов. Понятно, что наверняка вы увидите анимацию только на первом экране, возможно, на втором и очень вряд ли на третьем, т.к. пока вы будете скролить вниз, анимация, скорей всего, уже закончится.
Какой выход? Либо назначить довольно большое значение для параметра duration в последней анимации, либо ... воспользоваться плагином ScrollTrigger. В самом простом варианте вам нужно записать параметр scrollTrigger: '.selector' внутри метода to(), а плагин запустит анимацию, как только вы доскролите до указанного селектора.
Например, у нас есть 3 блока с классами .box-a, .box-b, .box-c, причем .box-a виден на экране сразу, а 2 других блока скрыты. Мы будем запускать анимацию .box-b в тот момент, когда он появится на экране:
| 1 2 3 4 5 6 7 8 9 10 11 12 | gsap.registerPlugin(ScrollTrigger); gsap.to('.box-a',{ x: '+=200', rotatation: 360, duration: 3 }) gsap.to('.box-b',{ scrollTrigger: '.b', x: '+=300', rotatation: 360, duration: 3 }) |
Кроме того, мы привяжем к тому же .box-b и анимацию .box-c, поэтому в момент, когда вы доскролите до третьего блока, вы увидите, только часть его анимации. Однако такой вариант вполне подходит, если у вас 2 блока расположены на одном экране, не очень далеко друг от друга. Заметьте, что скорость анимации при этом у всех блоков одинаковая.
| 1 2 3 4 5 6 | gsap.to('.box-c',{ scrollTrigger: '.b', x: '+=400', rotatation: 360, duration: 3 }) |
Пример вживую.
See the Pen GSAP SmoothTrigger by Elen (@ambassador) on CodePen.
И еще один вариант, но уже с анимацией по типу слайдера.
See the Pen Reveal Sections With GSAP & ScrollTrigger (Right-to-Left Horizontal Animation) by Envato Tuts+ (@tutsplus) on CodePen.
Для того чтобы изменить какие-либо параметры, нажмите на кнопку 
и поменяйте их в редакторе.
Параметры ScrollTrigger
Краткое пояснение параметров:
trigger— элемент, к которому привязанScrollTrigger.start,end— начало и конец области, где работает анимация.scrub— синхронизация со скроллом (true, либо число для плавности).pin— "прикалывает" элемент, не дает ему прокручиваться.toggleActions— поведение при входе/выходе в зону триггера.markers— показывает визуальные маркеры начала/конца (удобно для отладки).
Пример использования параметров GSAP ScrollTrigger
See the Pen GSAP ScrollTrigger Example by HTML-plus (@ambassador) on CodePen.
Что демонстрирует этот пример:
| ID элемента | Что делает анимация | Ключевые параметры |
|---|---|---|
#box1 | Сдвигается вправо при прокрутке | scrub: true, start/end, markers |
#box2 | Вращается и фиксируется на экране | pin: true, scrub, end: "+=300" |
#box3 | Увеличивается и появляется | from(), toggleActions |
Ну, а теперь о каждом параметре поговорим поподробнее.
Параметр toggleActions
Параметр toggleActions предназначен для того, чтобы сказать плагину, как должна отыгрываться анимация. Он может быть строкой с любой комбинацией значений через пробел.
| 1 | toggleActions: "play"|"pause"|"resume"|"reset"|"restart"|"complete"|"reverse"|"none"|| |
Этими значениями плагин ScrollTrigger определяет, как связанная анимация управляется в четырех отдельных местах переключения — onEnter, onLeave, onEnterBack и onLeaveBack (в указанном порядке). По умолчанию установлено значение 'play none none none'. Значение onEnter подразумевает поведение анимации в момент, когда анимируемый объект появляется на экране, onLeave - когда вы прокручиваете скролл, и анимируемый объект скрывается вверху, onEnterBack - когда вы возвращаетесь к анимируемому объекту, т.е. он снова появляется на экране, а onLeaveBack - когда вы снова прокручиваете страницу, и анимируемый объект исчезает.
Вы можете изменить ситуацию с воспроизведением анимации, задав другие значения:
See the Pen GSAP ScrollTrigger toggleActions by Elen (@ambassador) on CodePen.
В примере ниже вы можете посмотреть, как работают разные виды анимации, заданные параметром toggleActions. Здесь также можно переключать маркеры, о которых речь пойдет ниже.
See the Pen GSAP ScrollTrigger Cards Animation types by HTML-plus (@ambassador) on CodePen.
Параметры start, end и markers
Параметры start и end предназначены для указания того, в каком месте анимация должна начинаться и заканчиваться. В любом из них вы указываете строку из 2-х значений, в которых могут присутствовать ключевые слова "top", "center", "bottom", а также любые css-единицы измерений, например, 100px, 20vh или 70%.
В каждом из этих параметров обычно вы задаете 2 значения, например start: 'top 50vh'. В этом случае 'top' определяет, что верхняя часть анимируемого объекта должна достигнуть центра ('center') видимой области экрана (англ. viewport). По умолчанию start: "top bottom" и end: "bottom top".
В примере ниже мы меняем параметр start на "top center", и анимация начинается, когда верхняя часть анимируемого объекта дойдет до середины экрана. Закончится она через 2 секунды, но если вы будете перемещать скролл так, чтобы анимируемый объект периодически уходил вверх, а потом опять появлялся, то за счет параметра toggleActions со значением reverse, обратная анимация будет начинаться, когда совпадут метки end и scroller-end.
Код примера:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | gsap.registerPlugin(ScrollTrigger); gsap.to('.box',{ scrollTrigger: { trigger: '.box', toggleActions: 'restart none reverse none', start: "top center", end: '150% 80vh', markers: true }, x: 400, rotation: 360, duration: 2 }) |
Сам пример:
See the Pen GSAP ScrollTrigger start/end by Elen (@ambassador) on CodePen.
Несколько замечаний насчет значений параметров start и end:
- Значения для
startвсегда отсчитываются относительно верхней границы анимируемого объекта (первое) и относительно верхнего края области просмотра. Если вы зададите, например, start: "20px 80%", то это будет означать, что анимация начнется, когда объект будет выше 80% вьюпорта на 20px. - Параметр
end: "bottom 100px"означает, что нижний край анимируемого объекта должен достичь 100px от верхней границы браузера. - Для параметра
end: '+=300'означает, что 300px будут отсчитаны относительно позицииstartдля анимируемого объекта. - Вы можете использовать функцию для задания параметров. Например,
end: () => "+="+document.querySelector('.box').offsetWidthсвяжет конец анимации с шириной объекта. - В плане исследования этих свойств еще важен html и css-код, т.к. viewport сильно зависит от того, что есть в вашей html-разметке и какие css-свойства заданы для элементов. Вы можете столкнуться с тем, что ничего не работает, т.к. параметры начала и конца анимации вошли в противоречие со стилями элементов и расположением этих элементов.
В примере используется параметр markers: true для понимания того, в каком месте начнется и закончится анимация. В этом случае отметки start и scroller-start будут зеленого цвета, а end и scroller-end - красного.
Если вам нужно изменить цвета маркеров или размер шрифта, например, из-за фона сайта, вы можете задать настройки этого параметра.
| 1 2 3 4 5 6 7 | markers: { startColor: "white", endColor: "blue", fontSize: "18px", fontWeight: "bold", indent: 20 } |
Еще один пример с маркерами. Обратите внимание, что параметры начала и конца скроллинга имеют такие значения: start: "top 60%", end: "bottom 40%".
See the Pen GSAP Timeline markers Example by Elen (@ambassador) on CodePen.
Используем маркеры для отслеживания анимации
В примере ниже вы можете включать и выключать маркеры, чтобы увидеть, где начинается и заканчивается анимация, с одной стороны. А с другой, - где начинается и заканчивается прокрутка.
See the Pen GSAP ScrollTrigger Cards by HTML-plus (@ambassador) on CodePen.
Параметры scrub и pin
Параметр scrub может быть true | false или числом. Он связывает ход анимации непосредственно с полосой прокрутки, поэтому она действует как ползунок. Вы можете применить сглаживание, чтобы курсору воспроизведения потребовалось некоторое время, чтобы догнать положение полосы прокрутки! Это может быть любое из следующих
scrub: true- связывает ход анимации непосредственно с ходом ScrollTrigger.scrub: число— количество времени (в секундах), которое должно пройти курсору воспроизведения, чтобы «догнать», поэтомуscrub: 0.5приведет к тому, что курсору воспроизведения анимации понадобится 0,5 секунды, чтобы догнать положение полосы прокрутки. Это отлично подходит для сглаживания ситуации.
Пример с перелистыванием страниц и использованием параметра scrub от Jhey.
See the Pen Little book of GSAP w/ ScrollTrigger by Jhey (@jh3y) on CodePen.
Параметр pin
Начнем, пожалуй, с примера.
See the Pen GSAP Bottom Pin Alternative - minimal by GreenSock (@GreenSock) on CodePen.
Параметр pin может быть true | false, cтрокой или элементом — это селектор элемента, который должен быть закреплен в то время, пока ScrollTrigger активен, то есть он будет «прилипать» к своему начальному положению, в то время как остальная часть содержимого продолжает прокручиваться под ним. Разрешен только один закрепленный элемент, но он может содержать столько элементов, сколько вы хотите. Установка pin: true приведет к закреплению триггерного элемента.
Пример анимации с pin: true
See the Pen GSAP ScrollTrigger - Pinned Section Animation by Ryan Mulligan (@hexagoncircle) on CodePen.
Предупреждение: не анимируйте сам закрепленный элемент, поскольку это приведет к сбою измерений (ScrollTrigger высоко оптимизирован для производительности и выполняет максимально возможный предварительный расчет). Вместо этого вы можете вкладывать вещи так, чтобы анимировать только элементы ВНУТРИ закрепленного элемента.
ScrollTrigger знал, что нужно соответствующим образом смещать начальную/конечную позиции.В примере ниже используются параметры pin: true и scrub: 0.5 при перемещении блоков внутри одной секции.
See the Pen ScrollTrigger Flying Elements by GSAP (@GreenSock) on CodePen.
Пример с параметрами pin: true и scrub: true
See the Pen Scroll Trigger by GSAP (@GreenSock) on CodePen.
В примере ниже интересно то, что параметр end мы привязываем к расстоянию в 1000px.
See the Pen GSAP ScrollTrigger Cards start/end by Elen (@ambassador) on CodePen.
Использование pin для карточек
See the Pen GSAP ScrollTrigger Movie Stacking Animation by Zoe (@quicksilversel) on CodePen.
Pinned Object
Прикрепляем объект к определенному месту при прокрутке.
See the Pen GSAP Snap with Snap/Scrub by Naimesh B. (@naimeshbarot) on CodePen.
Пример использования ScrollTrigger со stagger для сетки из блоков
See the Pen GSAP ScrollTrigger Grid with Staggers by GSAP (@GreenSock) on CodePen.
Использование параметра stagger для анимации карточек
See the Pen Horizontal Scroll Cards by Ryan Mulligan (@hexagoncircle) on CodePen.
Пример с прокруткой части контента при закрепленном изображении
See the Pen Variable height stacked pinning with split scroll on section by GSAP (@GreenSock) on CodePen.
Параметр pinnedContainer
Здесь мы закрепляем определенный контейнер.
See the Pen GSAP ScrollTrigger scroll space by GSAP (@GreenSock) on CodePen.
Параметры onEnter, onLeave, onEnterBack и onLeaveBack
Параметры onEnter, onLeave, onEnterBack и onLeaveBack - это коллбек-функции (функции обратного вызова), которые отвечают за различные моменты "прохода скролла":
onEnterиспользуется, когда позиция прокрутки перемещается вперед после «начала» (обычно, когда триггер прокручивается в поле зрения). Например:
1onEnter: ({progress, direction, isActive}) => console.log(progress, direction, isActive)onEnterBackиспользуется, когда позиция прокрутки перемещается назад за «конец» (обычно, когда триггер прокручивается обратно в поле зрения). Например:
1onEnterBack: ({progress, direction, isActive}) => console.log(progress, direction, isActive)onLeaveиспользуется, когда позиция прокрутки перемещается вперед за «конец» (обычно, когда триггер прокручивается вне поля зрения). Например:
1onLeave: ({progress, direction, isActive}) => console.log(progress, direction, isActive)onLeaveBackиспользуется, когда позиция прокрутки перемещается назад за пределы «начала» (обычно, когда триггер прокручивается до конца назад после начала). Например:
1onLeaveBack: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
По сути дела, это специальные события для плагина ScrollTrigger, которые позволяют реагировать с помощью функций-коллбеков на проход элементов в зоне видимости или скрытие из нее.
В примере ниже мы используем все параметры-события для того, чтобы либо добавить к карточкам (класс .card) класс .in-view с подсветкой в виде свойства box-shadow, либо удаляем этот класс, когда карточка выходит из зоны видимости.
See the Pen GSAP ScrollTrigger Cards events by HTML-plus (@ambassador) on CodePen.
Использование метода batch()
Метод ScrollTrigger.batch() в GSAP — это суперполезная функция, которая позволяет анимировать группу элементов, оптимизируя производительность и сокращая код.
Если говорить кратко, то метод batch() позволяет задать одно правило/анимацию для нескольких элементов, которые входят в зону видимости по отдельности или группами, не создавая отдельный ScrollTrigger для каждого элемента.
Когда использовать batch():
| Когда… | Почему batch() полезен |
|---|---|
У тебя много одинаковых элементов (например, .card, .item, .box) | Не нужно писать 100 ScrollTrigger'ов |
| Нужна реакция при входе/выходе элемента в зону видимости | Удобно использовать onEnter, onLeave, onEnterBack, onLeaveBack |
| Важно улучшить производительность | GSAP группирует вызовы |
В примере у нас есть много блоков с однотипным форматированием и анимация с помощью метода batch().
See the Pen ScrollTrigger.batch() by HTML-plus (@ambassador) on CodePen.
Зачем использовать метод batch():
batch— это массив элементов, вошедших в зону действия (в отличие отonEnter: el => ..., гдеel— одиночный элемент).- GSAP оптимизирует события: если 5
.boxодновременно попали в экран, ты получишь один вызовonEnterдля всех 5. - Это сильно снижает нагрузку, особенно при большом числе элементов.
- С
stagger— получаем красивую последовательную анимацию.
Что еще можно сделать:
- Можно использовать
interval(по умолчанию 0.1 сек) — это как часто ScrollTrigger проверяет позицию скролла дляbatch. - Можно добавить
once: true, если нужно анимировать один раз. - Можно использовать
start,endкак и в обычном ScrollTrigger.
А здесь метод batch() анимирует заголовки и абзацы.
See the Pen test scroll trigger cards batch by GSAP (@GreenSock) on CodePen.
В еще одном примере вы увидите, как карточки с фото помещаются в центре. Можно слегка изменить анимацию.
See the Pen ScrollTrigger.batch() by HTML-plus (@ambassador) on CodePen.
Однократное проигрывание анимации
Для однократного проигрывания анимации используйте параметр once: true.
| 1 2 3 4 5 6 7 8 9 | const introTimeline = gsap.timeline({ scrollTrigger: { trigger: "#primary", pin: false, start: "top bottom", // when the top of the trigger hits the top of the viewport scrub: false, once: true } }); |
Удаление свойств объекта после проигрывания анимации
Для удаления всех анимаций при скролле нужно использовать функцию kill(), "убивающую" настройки анимации плагина, а также сбрасывать параметры, которые вы могли устанавливать с помощью функций GSAP from() или to(), задавая свойство для элемента с виде { clearProps: "all" }. Кроме того, вам, возможно, придется удалять какие-то классы, как в примере с карточками.
| 1 2 3 4 5 6 | ScrollTrigger.getAll().forEach(t => t.kill()); document.querySelectorAll('.card').forEach(card => { gsap.set(card, { clearProps: "all" }); // удаляет transform, opacity и т.д. card.classList.remove("in-view"); }); |
И второй пример:
See the Pen GSAP example for inline-style-removal query by Elen (@ambassador) on CodePen.
Примеры использования плагина ScrollTrigger
Эффект параллакса при скроллинге
See the Pen Parallax sections on scroll by GreenSock (@GreenSock) on CodePen.
Похожий эффект для React от Phillip Gimmi
See the Pen React Smooth Section Navigator by Phillip Gimmi (@phillip-gimmi) on CodePen.
Автор Tom Miller
See the Pen ScrollTrigger: SVG Text Mask by Tom Miller (@creativeocean) on CodePen.
Смена секций от Mahendra Pratap
See the Pen Gsap - ScrollTrigger, Section pin Animation by Mahendra Pratap (@mahendra_pratap) on CodePen.
Автор isladjan
See the Pen Parallax scroll animation by Elen (@ambassador) on CodePen.
ScrollTrigger + Draggable
See the Pen ScrollTrigger and Draggable by GreenSock (@GreenSock) on CodePen.
Использование SVG
В примере ниже при прокрутке мы видим, как SVG path с пунктирным контуром прорисовывается в процессе скролла при отслеживании этого с помощью GSAP ScrollTrigger.
See the Pen Scrolly Path with Cassie Evans! | @keyframers 4.1 by @keyframers (@keyframers) on CodePen.
Текстовый эффект от Pete Barr
See the Pen GSAP ScrollTrigger on Variable Fonts Perspective by Pete Barr (@petebarr) on CodePen.
Черно-белый текст от Craig Roblewsky
See the Pen Invert text on scroll with CSS variable by Craig Roblewsky (@PointC) on CodePen.
Появляющиеся буквы от Louis Hoebregts
See the Pen Apple Privacy animation - GSAP ScrollTrigger by Louis Hoebregts (@Mamboleoo) on CodePen.
Текстовый эффект для React от Phillip Gimmi
See the Pen Cinematic Text Reveal Scroll Animation by Phillip Gimmi (@phillip-gimmi) on CodePen.
Появление текста от Victor
See the Pen Text Color Change on Scroll (V2) by Victor (@vict0rkovalchuk) on CodePen.
И аналогичный пример от Prajot
See the Pen GSAP scrollTrigger opacity animation by Prajot (@prajotsurey) on CodePen.
Текстовый эффект с заголовками от Snorkl.tv
See the Pen splitText animation for each GSAP ScrollTrigger by Snorkl.tv (@snorkltv) on CodePen.
Вертикальный и горизонтальный скролл
Вариант для карточек с видео
See the Pen ScrollTrigger gallery by HTML-plus (@ambassador) on CodePen.
И еще один с фотогалереей от Luis Alberto Martinez Riancho
See the Pen ScrollSynced Carousel V3 (Gsap + Swiper) by Luis Alberto Martinez Riancho (@luis-lessrain) on CodePen.
Горизонтальный и вертикальный скролл + Swiper слайдер от Luis Alberto Martinez Riancho
See the Pen SieMatic Gsap + Swiper by Luis Alberto Martinez Riancho (@luis-lessrain) on CodePen.
Полукруглая галерея от MariaM
See the Pen Responsive GSAP ScrollTrigger Gallery by MariaM (@Marija-Milicevic) on CodePen.
Галерея от kamenono
See the Pen 3D Animation Scroll with GSAP ScrollTrigger by kamenono (@kamenono) on CodePen.
Горизонтальный скролл
Автор Snorkl.tv
See the Pen Pin / Horizontal Scroll // Fix Responsive by Snorkl.tv (@snorkltv) on CodePen.
Горизонтальный скролл для анимации природы от Abubaker Saeed
See the Pen Parallax Golden Hour Animation on Scroll (using GSAP & ScrollTrigger) by Abubaker Saeed (@AbubakerSaeed) on CodePen.
Смена разделов при скролле от Phillip Gimmi
See the Pen Vertical Sectional Slider - React GSAP by Phillip Gimmi (@phillip-gimmi) on CodePen.
Пример горизонтального скролла с раскрывающейся панелью от GreenSock
See the Pen Horizontal Scroll with expandable section by GSAP (@GreenSock) on CodePen.
Анимация взлета самолета от Jordi Moreno
See the Pen Plane Taking Off. GSAP Ease + ScrollTrigger simple animation. by Jordi Moreno (@jomorespi) on CodePen.
Анимация появления деталей компьютера в виде SVG от Lucas Himes
See the Pen Computer Parts! by Lucas Himes (@notanotherdoornob) on CodePen.
Анимация появления из тени наушников от Alex Illarionov
See the Pen The Supersonic Plugin For Scroll Based Animation: GSAP Airpods by Alex Illarionov (@Alex-Illarionov) on CodePen.
Появление изображения из-под маски с помощью clip-path от Njo
See the Pen GSAP-Reveal-Scrolltrigger-Animation by Njo (@njonj0) on CodePen.
Аккордеон при прокрутке от Fabio Ottaviani
See the Pen Scrolltrigger accordion by Fabio Ottaviani (@supah) on CodePen.
Появление блоков при прокрутке от GSAP
See the Pen Start - Scroll Cards by GSAP (@GreenSock) on CodePen.
То ли слайдер, то ли страница сайта от Jhey
See the Pen Humane.ai Inspired CSS Scroll Trickery ✨ by Jhey (@jh3y) on CodePen.
Сложный пример с отображением продукта в разных местах страницы
See the Pen GSAP | Animated Bottle Scroll by HTML-plus (@ambassador) on CodePen.
Страница с 3d мебелью на основе canvas от Paul Roger
See the Pen GSAP & ScrollTrigger with Spline 3D by Paul Roger (@Tiopayo) on CodePen.
Страница сайта от Daniel Hult
See the Pen GSAP ScrollTrigger — UI Animations by Daniel Hult (@daniel-hult) on CodePen.
Страница сайта от Pete Barr
See the Pen GSAP ScrollTrigger parallaxing with ScrollSmoother by Pete Barr (@petebarr) on CodePen.
