How can I get this animation to loop properly?

[hwgw]

Hi guys,

 

I'm quite new to GSAP and I'm trying to create this animation but having difficulty getting it to loop properly.

 

The first item comes up from the bottom and then the animation loop should begin where each new item comes in from the top and pushes the ones below down. Then once an item is pushed out of view it should go back to the top and animate in again. 

 

I've attached a codepen for reference. Any help would be greatly appreciated! 

See the Pen QWVxdqV by hwgwalker (@hwgwalker) on CodePen

[Rodrigo]

Hi @hwgw and welcome to the GreenSock forums!

 

This is a perfect fit for the Vertical Seamless Loop helper function:

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

 

Give that a try and if you get stuck at some point and have a GSAP specific question, let us know.

Happy Tweening!

[hwgw]

Thanks.

How best to implement it with my particular animation? Been trying to get it to work but haven't had any luck yet. 

[GSAP Helper]

@hwgw can you please share your attempt (like a CodePen)? Even if it's not working perfectly - it helps us to see what you're doing.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[hwgw]

20 hours ago, GSAP Helper said:

@hwgw can you please share your attempt (like a CodePen)? Even if it's not working perfectly - it helps us to see what you're doing.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

@GSAP Helper Sure, my CodePen is here 

Seems to loop ok (although it glitches a few seconds in), but for my animation I don't want the items to be scrolling continuously. Instead, it's kind of meant to be like posts being added to a social media timeline. So an item will come in from the top and shift the others down. Then each item that loops back to the top is a 'new' post. 

 

Very rough outline of what I want it to look like here if it helps: 

See the Pen dyqqbar by hwgwalker (@hwgwalker) on CodePen

.

 

Just not sure how to alter the verticalLoop function to achieve this. 

[GreenSock]

Here's probably how I'd approach it: 

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

 

Does that help? 

[hwgw]

10 hours ago, GreenSock said:

Here's probably how I'd approach it: 

 

 

 

Does that help? 

 

That's excellent - thanks so much!