Having trouble with scrollTrigger inside forEach

[WillH]

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

[WillH]

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.

[Rodrigo]

Hi,

 

Basically the issue is that you are running an extra loop for the slides of each section.

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[WillH]

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?

[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.

[Rodrigo]

Hi,

 

That's because of your CSS, not GSAP/ScrollTrigger related (if you comment out all the JS you won't see the placeholders neither).

 

The issue is here:

.scrolltrigger-container {
  height: 100vh;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

Those basically are on top of the placeholders. Changing the position to relative fixes the issue.

 

I updated the codepen example.

 

Happy Tweening!