Share Posted March 16 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 More sharing options...
Share Posted March 16 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! Link to comment Share on other sites More sharing options...
Author Share Posted March 17 Thanks. How best to implement it with my particular animation? Been trying to get it to work but haven't had any luck yet. Link to comment Share on other sites More sharing options...
Share Posted March 18 @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. Link to comment Share on other sites More sharing options...
Author Share Posted March 19 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 See the Pen QWVxdqV by hwgwalker (@hwgwalker) on CodePen 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 More sharing options...
Solution Solution Share Posted March 20 Here's probably how I'd approach it: See the Pen BaOOLBJ?editors=1010 by GreenSock (@GreenSock) on CodePen Does that help? 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 20 10 hours ago, GreenSock said: Here's probably how I'd approach it: Does that help? That's excellent - thanks so much! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now