How to add stagger to scrollTrigger elements that are side by side

[14136_1494126593]

I have a simple demo with a few elements that are inside a grid and currently they all appear at the same time. I would like the boxes inside the box-group animate in one by one. I tried adding "stagger: 0.5", but obviously it's not working. What is the proper way to do this?

 

See the Pen OJdywRa by planetgrafix (@planetgrafix) on CodePen.

[GreenSock]

Sounds like the perfect job for ScrollTrigger.batch()

 

See the Pen mdvVPXW?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

Is that what you're looking for? 

[14136_1494126593]

Thanks Jack for the super quick solution! Amazing!

 

There is only one problem... it works properly if the box-group is wide enough to fit all 8 items, but as soon as the viewport is narrower and some of the items wrap to a second line , then the order of appearance is not correct.

[GreenSock]

Oh, you want them all to stagger in when the container enters the viewport? Sure, that's easy: 

See the Pen MWLKeXK?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

Is that what you're looking for? 

 

My previous solution was batching them based on which ones actually entered the viewport. 

[Rodrigo]

Hi,

 

One thing that can give you issues is that in your codepen demo you are using really old versions of GSAP and ScrollTrigger, always use the latest versions.

 

Regarding the order, actually ScrollTrigger is doing exactly what it should. Keep in mind that if you have a width that only fits six elements, you'll have (based on your demo) two rows, one with six elements and another with two. As soon as the elements with the class hit the trigger point, they are put into an array and animated based on the instructions you pass in the callbacks. If you scroll really slow and stop when just the first row appears everything will work as you expect, only the first row will show and the second one will show once those elements pass the trigger point. But if you scroll a bit more you'll see that the first and seventh element will animate in at the same time. That is totally expected since both elements passed the start trigger point almost at the same time. See the issue here? This is just because you are expecting this to behave in a different way, nothing more.

 

If you want your boxes inside a group to animate in the order they are present in the DOM, then ScrollTrigger Batch might not be the best alternative, just a regular stagger animation using a regular ScrollTrigger instance and specific selectors for each type of box.

 

Here is a fork of the last demo:

See the Pen yLZeJQe by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.
Happy Tweening!

[14136_1494126593]

Thank you! That's very helpful, it made me understand better how defining the trigger works! I appreciate your support.

 

Thanks for pointing out that it wasn't the latest version of GSAP. I just added the one that came by default in Codepen - looks like they are linking to an older version.

 

EDIT: I just checked closer and unfortunately there is still an issue. As I scroll down, the boxes that are outside the group disappear as soon as the ones inside group start to appear.

 

 

 

[GreenSock]

8 hours ago, 14136_1494126593 said:

EDIT: I just checked closer and unfortunately there is still an issue. As I scroll down, the boxes that are outside the group disappear as soon as the ones inside group start to appear.

Yeah, that's because you wanted completely different behavior for the ones in the group than the ones outside the group, so I just focused on animating those. You can just handle the other ones the same as you did before: 

See the Pen ExrPWxw?editors=1010 by GreenSock (@GreenSock) on CodePen.

[14136_1494126593]

Thank you for the amazing support!