ScrollTrigger.batch() + staggering the animation of cards

[Heather Taylor]

Hello! 👋 😃
I have a grid of cards that isn't animating quite as I'd like. When multiple cards in a row are triggered, they animate all the images, all the titles, and then all the copy within the viewport. I would like to animate the image, title, and copy of a single card, then animate the image, title, and copy of the next card, and so on.

 

It seems that I might be on the right track with the second declaration of `tl.to` on line 33 but this targets all elements within the card. I only want a single element within the card such as the title. I tried to pass in `.card__title` but it doesn't work quite right either. I've been trying to see if adding duration, stagger, or delay would help, but I haven't had any success yet.

 

This there a way to send a timeline created for a card into a batch? 🤔 I've been trying to think of all the things! 😂

 

I'm super grateful for any assistance!

Heather

 

 

See the Pen WNGpRYR?editors=0110 by heatherdesigns (@heatherdesigns) on CodePen

[ZachSaucier]

Hey Heather and welcome to the GreenSock forums.

 

In this case you don't want a single timeline with all of your animations. Instead you should loop through all of your containers and create a timeline for each, create batching for each container, and then inside of the batch callback you play the timeline for that container. Something like this:

See the Pen GRjWxaJ?editors=0010 by GreenSock (@GreenSock) on CodePen

[Heather Taylor]

Fantastic! This makes sense. Crossing my fingers it looks great in my project as well. 😆  Thank you so much!!