animating multiple elements but reversing after each stagger?

[Trynix]

Hi everyone!

I'm trying to have an animation such that yellow card unblurs and goes to the front, then blurs again just as orange card unblurs and steps to the front, and then the orange card blurs just as the green card unblurs and steps to the front.

 

I tried fromto but I don't think I'm doing it right. I considered manually adding each step in a timeline, but was wondering if there's a better approach to this. Also since this'll be a repeating animation, I'd want each element to take the same time, but my example at this point seem to have a jump after the last element.

 

Thanks for any feedback

See the Pen OJOgyae by mazayadigital (@mazayadigital) on CodePen

[mikel]

Hey @Trynix,

 

Combining two stagger tweens could be an alternative.

 

See the Pen JjOJGXB?editors=0110 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Trynix]

Thank you!!