[Having trouble with scrollTrigger inside forEach]

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.

[Having trouble with scrollTrigger inside forEach]

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?

[Having trouble with scrollTrigger inside forEach]

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.

[Having trouble with scrollTrigger inside forEach]

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

See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

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:

See the Pen zYyWpge by willhenderson (@willhenderson) on CodePen

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.

See the Pen ZEVxrqd by willhenderson (@willhenderson) on CodePen