Триггер исчезает из -за конфликта между двумя Scrolltriggers ⇐ Javascript

[Anonymous]

Я в настоящее время создаю горизонтальный свиток для своего веб -сайта. В самом конце этого горизонтального свитка я также установил Scrolltrigger для эффектов укладки. Тем не менее, как ни странно, триггер для эффектов укладки, #Facts, исчезает из вида, как только пользователь входит в область OnLeave. Это очень странно. < /P>

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

function createScrollTriggerMD() {
ScrollTrigger.create({
trigger: "#scroll-container",
start: "top top",
end: () => `+=${getScrollAmount() * -1}`,
pin: "#scroll-container",
animation: tween,
scrub: 1,
onUpdate: (e) => {
let scale;
let y;
if (e.progress  {
const cards = document.querySelectorAll(".protection-card");
const header = document.querySelector("#facts");
const animation = gsap.timeline();
let cardHeight;

function initCards() {
animation.clear();
cardHeight = cards[0].offsetHeight;
console.log("initCards()", cardHeight);
cards.forEach((card, index) => {
if (index > 0) {
//increment y value of each card by cardHeight
gsap.set(card, { y: index * cardHeight });
//animate each card back to 0 (for stacking)
animation.to(
card,
{ y: index * 10, duration: index * 0.5, ease: "none" },
0
);
}
});
}

initCards();

ScrollTrigger.create({
trigger: "#facts",
start: "top top",
pin: true,
end: () => `+=${cards.length * cardHeight + header.offsetHeight}`,
scrub: true,
animation: animation,
markers: true,
invalidateOnRefresh: true,
});

ScrollTrigger.addEventListener("refreshInit", initCards);
},
invalidateOnRefresh: true,
});
}

Моя цель проста: как я могу объединить эти два Scrolltriggers, чтобы эффекты стека Scrolltrigger работали только после того, как горизонтальный Scrolltrigger закончился?

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