GASP ScrollTrigger.batch() with different reveal directions

[vagresockxul]

Hi, I currently try to combine this two examples:

 

ScrollTrigger.batch() with dynamic added elements

❗ Oddly, the forum software append the codepen to the end of the post.

Source: 

 

Reveal animation with different directions (to top/left/right)

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

 

The main issue for me is:

• that I can't define the animation directions within a batch
• if I use a forEach, I lost the staggered benefit from ScrollTrigger.batch()

How to solve this?

 

Best regards

 

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

[vagresockxul]

My first try was to add delay. But this is not the same as stagger. If I load a long page with a lot of reveal elements further below, I have to wait until the delayed animation has run to this point. It's hard to put into a demo, but I tried:

See the Pen PopBaYK by vacoxudelpen (@vacoxudelpen) on CodePen

[Cassie]

Heya pal!

 

So a 'batch' of elements is just an array. What you do with that array is entirely up to you.

Here -  in this example I'm looping through the elements in that array and setting the initial x position based on the index value. ☺️

See the Pen 3312c71b4127e26e7e809d3b98e47a9a?editors=1010 by cassie-codes (@cassie-codes) on CodePen

Does this help?

[vagresockxul]

Wow, as simple as good. 😁 This indeed helps a lot. My thoughts were overcomplicated. 

 

The only think I had to add was the batchMax configuration for ScrollTrigger.batch() to prevent the behavior similar to my delays solution.

 

Thanks for the amazing support.