stagger Staggered floating/sliding up icons, loop bug

[Vahan0799]

Hi Everyone, 

I'm trying to create a smooth staggered fade out/float up animation for partner logos but having loop as well. My main issue here is that once the last desired elements are visible, it's not animating properly the same way to show the first ones. It's kind of resets the entire timeline without smooth transitioning.
That's probably because of set method that I use to reset the animation, but didn't work anything else properly.
Any advice or help please?

Here's the codepen.


P.S. trying to make the replica of partners section from https://www.humaan.com/

See the Pen oNrGydp by VahahBio (@VahahBio) on CodePen

[mvaneijgen]

Check out this amazing tutorial by our own @Carl it explains how to do this with a great visual graph. Hope it helps and happy tweening! 

 

 

 

 

[Vahan0799]

11 hours ago, mvaneijgen said:

Check out this amazing tutorial by our own @Carl it explains how to do this with a great visual graph. Hope it helps and happy tweening! 

 

 

 

 

@mvaneijgen Yes this was helpful, I've managed to adjust my code based on this, but still It doesn't gets any better 😕 looping isn't seamless and now positioning seems off, like next sets of items are not animating in when the current ones animates out. What am I doing wrong?

[Rodrigo]

Hi,

 

I'm pretty sure that there is a better way to do this, but this is what I can come up with:

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

 

Hopefully this helps

Happy Tweening!

[Vahan0799]

52 minutes ago, Rodrigo said:

Hi,

 

I'm pretty sure that there is a better way to do this, but this is what I can come up with:

 

 

 

Hopefully this helps

Happy Tweening!

This is amazing ♥ As always I skip the easy solution and ran for complex one! But I believe with staggering is the correct way while using gsap. But this is amazing. Thanks a lot!