Lau Posted June 10, 2020 Share Posted June 10, 2020 Hello! I'm new to GSAP, this is my 2nd day learning. I decided to jump in head first by reproducing that GIF with GSAP. This is far from finish, I need help with the top left animation. I managed to make the animation, but it plays for 4 times instead of 3 times like the bottom right. So the bottom right already finish and wait for top left to finish then it repeats. Any way to cut short the animation by 1 time? Or any other solution or feedback would be greatly appreciated. Thanks! See the Pen ExPPgVm by laurensiusadi (@laurensiusadi) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 10, 2020 Share Posted June 10, 2020 Hey Lau and welcome to the GreenSock forums! First things first: I don't know where you're learning GSAP from, but some of the syntax that you're using is the old syntax. We highly recommend using the GSAP 3 syntax and using the official GreenSock "Getting Started" article to start learning. Side question: Why dynamically create each element? I'd just make them in the HTML section and be done with it. Also your numbering of panels (with 1 being the bottom right and 2 being the top left) is a bit confusing. I recommend going left to right from top to bottom ordering so that other developers (yourself included) later can understand how things are setup more easily. Now to address what you asked about: It's not as simple as just dropping the last repeat because if you drop the last repeat then it's still not synced. I recommend that you setup your animation differently. Looking at the gif, there's only 3 elements in the top left panel showing at one time. So that's all the elements that you need. You don't need small and big versions of each as you can just animate the same element multiple times. Here's how I'd set it up: See the Pen 17b0cb4d87569b6a0cfdacc9e7ee1f98?editors=0010 by GreenSock (@GreenSock) on CodePen Note that I'm using the beta version of GSAP because there was a minor bug related to immediateRender on later repeats that has been fixed. Also, you might be interested in knowing that the yPercent and xPercent properties exist in GSAP. That way you can do xPercent: -900 instead of x: "-900%". You can even affect xPercent and x separately in the same tween! 4 Link to comment Share on other sites More sharing options...
Lau Posted June 11, 2020 Author Share Posted June 11, 2020 Thanks a lot for the direction! I will learn more! Link to comment Share on other sites More sharing options...
Lau Posted June 12, 2020 Author Share Posted June 12, 2020 I've done it! Thanks GSAP for the great product! 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 12, 2020 Share Posted June 12, 2020 Great work! It looks good. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 12, 2020 Share Posted June 12, 2020 You've got some great hand lettering by the way! 1 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