Help solving how to animate this in GSAP

[Lau]

 

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

[ZachSaucier]

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!

[Lau]

Thanks a lot for the direction! I will learn more!

[Lau]

I've done it!
Thanks GSAP for the great product!

[ZachSaucier]

Great work! It looks good.

[ZachSaucier]

You've got some great hand lettering by the way!