Problem with looping multiple sections

[D1MK4]

Hello, I've got a problem with animations.

I'm trying to animate multiple sections and elements inside with the stagger.

I wrote a code like this:

 

 

And animation looks very good, every item in the section is animating with a stagger, generally everything is fine until I add the same section (.products-grid) below existing section in html.

Two same sections on the same site are causing a bug and the animation is not working. (It is starting but looks like it's stopping at 10% maybe).

To be honest I searched a lot of topics and tried to fix this but I'm in a dead end.

Can anyone look at this and maybe try to help me even a little bit?

Greetings.

See the Pen ZEKPMBB by D1MK4 (@D1MK4) on CodePen

[OSUblake]

Welcome to forums @D1MK4

 

It's hard to what's going on from a code snippet. Do you think you can put that in a minimal demo? Thanks!

[D1MK4]

6 minutes ago, OSUblake said:

Welcome to forums @D1MK4

 

It's hard to what's going on from a code snippet. Do you think you can put that in a minimal demo? Thanks!

 

Sorry, I've added a link to codepen

[OSUblake]

There's no CSS, HTML, or GSAP scripts in the demo. The point of a minimal demo is so that we can visually see what's going on and test out different solutions. It doesn't need to include images or any complicated CSS. Just the bare minimum to reproduce the issue.

 

 

[GreenSock]

Like Blake said, it's very difficult to troubleshoot by only looking at the JS, but my guess is that you're looking for something like this: 

const productsGrids = gsap.utils.toArray(".products-grid");

productsGrids.forEach((productsGrid) => {
	gsap.from(productsGrid.querySelectorAll(".products-listing .single-product"), {
		scrollTrigger: {
			trigger: productsGrid,
			start: "-50px 80%",
		},
		opacity: 0,
		y: 300,
		duration: 0.4,
		stagger: 0.15,
	});
});

If you need more help, please add HTML/CSS to that CodePen demo so we can see things in the proper context. 

 

Happy tweening!

[D1MK4]

23 minutes ago, OSUblake said:

There's no CSS, HTML, or GSAP scripts in the demo. The point of a minimal demo is so that we can visually see what's going on and test out different solutions.

 

 

 

Great, I've added HTML and CSS, thanks for the advice

[D1MK4]

6 minutes ago, GreenSock said:

Like Blake said, it's very difficult to troubleshoot by only looking at the JS, but my guess is that you're looking for something like this: 

const productsGrids = gsap.utils.toArray(".products-grid");

productsGrids.forEach((productsGrid) => {
	gsap.from(productsGrid.querySelector(".products-listing .single-product"), {
		scrollTrigger: {
			trigger: productsGrid,
			start: "-50px 80%",
		},
		opacity: 0,
		y: 300,
		duration: 0.4,
		stagger: 0.15,
	});
});

If you need more help, please add HTML/CSS to that CodePen demo so we can see things in the proper context. 

 

Happy tweening!

 

I've added HTML and CSS, thank you

[OSUblake]

Thanks for the demo, it's very helpful.

 

Jack's code is probably what you're after, but with a little change.

 

// this selects the first product
productsGrid.querySelector(".products-listing .single-product")

// this selects all the products
productsGrid.querySelectorAll(".products-listing .single-product")

 

[D1MK4]

This is awesome guys, thank you very much, it is working perfectly.

Helping just with JS - crazy