Jump to content
Search Community

How can I get this animation to loop properly?

hwgw test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...