ScrollTrigger / Stagger issue

[RawrBear]

Hey all!

 

I've been using GSAP on and off for quite  while, and I thought I understood it well enough to do what I want but.. I guess not.

This was originally in a Nextjs app and I though Next was causing the problem so I broke it out into vanilla, but I'm still getting this weirdness happening.

 

If you look at the pen, you'll see "IMAGE<number>" scrolling in each section (not always in the same place but that's because I'm tired and don;t want to fix the alignment of the flex lol). My goal here is to have a horizontal scroll section (which is working currently) and in each panel, have an info section and an image slideshow. 

I've been hacking on this for a couple of weeks and no matter what I do, I can't get it to work. Today, I found a pen (and video) by Gary Simon, and a pen (and video) by Snorkl TV. They both have what I want so I figured I'd bolt them together and use that as a jumping off point to reach the end goal.

 

Gary's Code:

See the Pen gOjZKOO by designcourse (@designcourse) on CodePen

Snokl's Code:

See the Pen ExVEOPa by snorkltv (@snorkltv) on CodePen

 

The problem is the "IMAGE" section is not firing properly. It works for the very first "change" and then you get this huge blank spot. Sometimes they fire off at almost the same time, sometimes they don't fire at all. I can't upload the Nextjs problem or code because its huge and a mess but it's doing pretty much the same thing as this vanilla example.

 

I'm pretty sure something is screwed up between ScrollTrigger and the staggers but I don't know what that is.

What am I missing? Any help is greatly appreciated!

 

P.S Please explain it like I'm 5, my brain hurts lol

 

P.P.S Codepen seems to me screwing up the layout and pushing everything to the bottom.. Hopefully you can see the demo, if not, I'll see if I can fix the pen. Cheers!

See the Pen qBJXbwL by RawrBear (@RawrBear) on CodePen

[Rodrigo]

Hi,

 

Actually this is super simple. Right now you're doing this in your sections loop:

let targets = document.querySelectorAll("section .imageTest h1");

That basically selects all the h1 tags that live inside of an element with that class, that lives inside a section tag. If you inspect your code you'll see that all the h1s from all the sections are being animated in sequence:

 

section[0].h1[0] -> section[0].h1[1] -> section[1].h1[0] -> section[1].h1[1] -> section[2].h1[0] -> section[2].h1[1]

 

So that's why it takes so long for them to repeat as expected. If you change just that line to this:

let targets = section.querySelectorAll("section .imageTest h1");

It seems to work the way you expect. This is a fork of your codepen example:

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

 

Hopefully this helps.

Happy Tweening!

[RawrBear]

Wow... Thank you so much! I now get what is going on!

You guys are awesome! No doubt I will be back again with more questions later lol.

 

Have a great weekend!