The trigger disappears due to a conflict between two ScrollTriggers

Question

I’m currently creating a horizontal scroll for my website. At the very end of this horizontal scroll, I also set up a ScrollTrigger for stacking effects. However, strangely, the trigger for the stacking effects, #facts, disappears from the viewport once the user enters the onLeave area. This is very odd.

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 <= 0.5) {
 scale = gsap.utils.mapRange(0, 0.5, 1, 0.6, e.progress);
 y = gsap.utils.mapRange(0, 0.5, 0, -150, e.progress);
 } else {
 scale = gsap.utils.mapRange(0.5, 1, 0.6, 1, e.progress);
 y = gsap.utils.mapRange(0.5, 1, -150, -150, e.progress);
 }
 gsap.to("#red-bubble", {
 y,
 scale,
 x: `-${e.progress * 40}%`,
 overwrite: "auto",
 duration: 0.1,
 });
 },
 onLeave: () => {
 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,
 });
}

My goal is simple: how can I combine these two ScrollTriggers so that the stacking effects ScrollTrigger only runs after the horizontal scroll ScrollTrigger has finished?

• Ahmed: I think you can combine both ScrollTriggers into one ScrollTrigger with a master timeline. Let the horizontal scroll run first, then start the stacking animation. This way #facts stays visible and everything runs smoothly.