Thanks, @Cassie - I've come to realize after some research that my forEach loop is causing issues because I have other triggers in my page (some not of the "horizontal scroll" variety) and thus conflict with the order as described in @OSUblake's solution in this thread. So, I think I need to reorganize my code to handle the different conditions. In my project (a storytelling-type landing page), I have 10 different scrolltrigger sections, each of which belong to one of two general animation styles, i.e. (1) horizontally scrolling panels as described in the original post, and (2) another with panel elements that layer over one another as one scrolls. Given that the order alternates, I just want to confirm that the best way to handle the behavior is using a "master" forEach loop that checks for the panel type and creates the appropriate scrolltrigger, assuming I use a consistent pattern of classes for elements throughout? In my case, following @OSUblake's model, it would be something like this, I assume?
gsap.utils.toArray("#trigger-container").forEach(element => {
if (element.classList.contains("hscroll")) {
// horizontal scrolling trigger/timeline behavior here
let tl = gsap.timeline({
scrollTrigger: {
trigger: element,
pin: true,
scrub: 1,
end: () => "+=" + element.offsetWidth
}
})
tl.to(element, {
x: () => -(element.scrollWidth - document.documentElement.clientWidth) + "px",
ease: "none",
})
tl.set({}, {}, "+=0.25")
} else if (element.classList.contains("layers")) {
// layered elements trigger/timeline bahavior here
}
})
I realize this should probably be in its own thread at this point, but still generally applies to the original question. Thanks for the guidance here as I try to organize my code in the most efficient/effective manner possible.