Раздел не имеет правильной позиции GSAP, ScrollTrigger ⇐ Javascript

[Anonymous]

Я только начал экспериментировать с GSAP и ScrollTriggers. Моя цель — создать небольшую анимацию в разделеsection.hero, которая будет оставаться прикрепленной к экрану во время анимации. В настоящее время моя проблема заключается в том, что раздел, в который я поместил анимацию, имеет перевод 900 пикселей по оси Y при загрузке страницы. Когда я прокручиваю вниз и дохожу до конца анимации, перевод размером 900 пикселей удаляется, и мой раздел возвращается в верхнюю часть экрана, как я хочу, и анимация работает так, как ожидалось. Почему у моегоsection.hero такое большое смещение?
HTML

Код: Выделить всё

Title




Title


Title




Title

JS

Код: Выделить всё

const scrollTrigger = {
trigger: '.hero',
scrub: 0.75,
markers: true,
pin: true,
pinSpacing: false,
};

gsap.to('.left', {
scrollTrigger: scrollTrigger,
xPercent: -100,
ease: 'none',
});
gsap.to('.right', {
scrollTrigger: scrollTrigger,
xPercent: 100,
ease: 'none',
});

Я попробовал добавить pinSpacing: false в свой JS, но это не сработало, как и установка значения true.

Подробнее здесь: https://stackoverflow.com/questions/793 ... olltrigger