Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Help solving how to animate this in GSAP

Recommended Posts



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.

See the Pen ExPPgVm by laurensiusadi (@laurensiusadi) on CodePen

Share this post

Link to post
Share on other sites

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!

  • Like 4

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Great work! It looks good.

Share this post

Link to post
Share on other sites

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

  • Thanks 1

Share this post

Link to post
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.