Как правильно настраивать ScrollTrigger?

ScrollTrigger - это инструмент, предоставляемый библиотекой GSAP (GreenSock Animation Platform), который позволяет создавать анимацию и визуальные эффекты, активируемые при прокрутке веб-страницы.

Чтобы правильно настроить ScrollTrigger в Angular, нужно выполнить следующие шаги:

Шаг 1: Установка GSAP
В первую очередь, установите GSAP с помощью npm:

npm install gsap

Шаг 2: Импорт ScrollTrigger
Импортируйте ScrollTrigger из gsap в компонент, где будет использован:

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

Шаг 3: Настройка ScrollTrigger
Далее, добавьте настройку ScrollTrigger внутри метода ngOnInit компонента:

ngOnInit(): void {
gsap.registerPlugin(ScrollTrigger);
this.setupScrollTriggers();
}

setupScrollTriggers(): void {
const elements = document.querySelectorAll('.your-element-class');

elements.forEach((element) => {
gsap.to(element, {
opacity: 0,
x: -100,
scrollTrigger: {
trigger: element,
start: 'top 80%',
end: 'top 20%',
toggleActions: 'play none reverse reset',
},
});
});
}

В приведенном выше примере мы регистрируем ScrollTrigger как плагин GSAP с помощью gsap.registerPlugin(ScrollTrigger). Затем мы вызываем метод setupScrollTriggers(), где выполняется настройка.
Метод setupScrollTriggers содержит логику, где мы выбираем все элементы с классом 'your-element-class' (вы можете заменить его на свой собственный класс) с помощью document.querySelectorAll(). Затем мы используем forEach для применения анимации к каждому элементу.
В данном случае мы применяем анимацию, которая делает элементы невидимыми и сдвигает их влево на 100 пикселей. Когда элемент достигает 80% прокрутки между его верхней и нижней границей, анимация начинается в зависимости от значения start и end в scrollTrigger. toggleActions позволяет управлять поведением анимации при прокрутке.

Шаг 4: HTML-разметка
Не забудьте добавить соответствующую HTML-разметку для элементов, к которым вы применяете ScrollTrigger:

<div class="your-element-class">Your element content</div>

Обратите внимание, что вы должны заменить 'your-element-class' на свой собственный класс или выбрать другой способ выбора элементов (например, по id или атрибуту).

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