ScrollTrigger - batches broken up into multiple containers

[ercb]

I'm a javascript and Greensock novice, so please be gentle.

 

I'm trying to break these batches up into individual containers because the issue I'm running into is that if you follow a link to an anchor at the bottom of the page, you end up having to wait for all of the elements in the batch to animate before they reach your scroll position.  Does that make sense? 

A pen is worth a thousand words, I suppose, so here's my attempt.  Hit the button to be taken to the bottom, and then wait forever before the animation reaches the bottom.

 

Maybe batch isn't the correct approach--I'm open to suggestions.

See the Pen VwgMyvx by ericbrissette (@ericbrissette) on CodePen

[mvaneijgen]

Hi @ercb 

 

I don't know what you're seeing, but I'd copied your boxes three more times and when I click "bottom" it instantly starts playing what is in the viewport and all the boxes in between don't get animated. I've got a screen recording, the frist view boxes get animated, I click "bottom" and it starts animating from their immediately.

 

This sounds pretty much like you describe, but I have the feeling I'm missing something? 

 

[ercb]

Sorry, I had added 

ScrollTrigger.config({limitCallbacks: true});

Which kind of resolves the problem, but doesn't get at the core of what I was hoping to accomplish, which is to set up individual batches of animations based on a container class.  

 

It also introduces another issue, which is that if you scroll back up, the animations don't play, but I'm sure that's just a lack of my understanding of Greensock.  I have commented out the above line so that you can see the issue I was referring to.

[mvaneijgen]

Ah, I see now. This is a scoping issue. 

 

You're doing a for each loop for your container, but you don't scope your ".card" selector to the current container. 

 

I've add a really handy selector helper function https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() and scope it to the current container. 

 

Does this solve your issue? 

 

See the Pen mdvBzed?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Scrolling back up triggers the onEnterBack, call back, which is not set in your example, so if you want to do something for that you have to define it. And in this case do the same animation as you onEnter callback.

[ercb]

That's exactly what I was looking for, thank you for the info and link to the docs!