WillH

Actually, nevermind. It's not doing it when I copy these changes back into my real code. The placeholders in between and after display just fine. So no need to spend any time diagnosing the issue happening in that particular codepen. Thanks so much for the help! Have a great day.

Thank you @Rodrigo! Understanding the preferred syntax GSAP wants to loop through this stuff is very helpful. One last question for you. In my markup I have a placeholder section, then the "A" slides, then another placeholder, then the "B" slides, then a final placeholder. But in your codepen the 2nd and 3rd placeholders seem to never show and the B slides play directly after the A slides. Any idea what's going on there?

Sorry, new to the forum and didn't realize all of the links to codepens would be converted inline. Hopefully it's not too distracting.

Hello ? I'm new to GSAP/Scrolltrigger and trying to wrap my head around things still. So I apologize if this is a glaringly obvious rookie mistake. I'm trying to modify the Layered pinning from bottom basic example into a re-usable module (to understand how to use Scrolltrigger for more than just one-offs). I have a "one-off" working example here: https://codepen.io/willhenderson/pen/zYyWpge gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ scroller: "#custom-scroll-container" }); gsap.to("[data-slide]:not(:last-child)", { ease: "none", scrollTrigger: { end: "+=300%", pin: true, scrub: true, start: "top top", trigger: "[data-module-stackedslides]" }, stagger: 0.5, yPercent: -100 }); gsap.set("[data-slide]", {zIndex: (i, target, targets) => targets.length - i}); But when I try to apply this logic more dynamically (and to more than one element) things fall apart and I'm not sure what I'm doing wrong: gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ scroller: "#custom-scroll-container" }); let stacked_slides_modules = document.querySelectorAll('[data-module-stackedslides]'); stacked_slides_modules.forEach((module) => { let slides = module.querySelectorAll('[data-slide]:not(:last-child)'); let end_spacing = 100 * slides.length; slides.forEach((slide) => { gsap.to(slide, { ease: "none", scrollTrigger: { end: "+=" + end_spacing + "%", pin: true, scrub: true, start: "top top", trigger: module }, stagger: 0.5, yPercent: -100 }); }); }); Note: I'm setting the z-index inline in the style attribute on the "dynamic" version just for expediency in setting up the test (as I hadn't figured out how to handle that in the forEach yet). Thank you for any insight you can offer.