Jump to content

Dave Laez

Updating percentage based on a Timeline

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi All! I'm a newbie and i hope somebody can help me regarding a matter. Here below a short explanation.


I'm trying to create a Preloading animation using Gsap. As you can see i have created a little SVG sample, then i have animated It using a timeline (nothing complicate and i hope i did it in the right way):

See the Pen yojKxo?editors=1010 by DaveLaez (@DaveLaez) on CodePen


At this point i want something that work in this way: 


See the Pen keEyq?editors=1010 by jonathan (@jonathan) on CodePen



A percentage progress linked with the Timeline. I have tried in many ways but nothing seems to work as i want. I know that the solution require  a Javascript code but i don't know how to put Javascript and Gsap together.


I hope I was clear, Thanks in advance.



See the Pen yojKxo?editors=1010 by DaveLaez (@DaveLaez) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demos. Nice animation.


Every animation has a progress() which is a value between 0 and 1. When the animation is half-way, or 50% complete tl.progress() will return 0.5.

So if you know your page is 80% loaded, you can set the progress to 0.8 like:




The demo below has a few buttons that allow you to set the progress() to different amounts.

While your page loads you could repeatedly update the progress() very quickly


See the Pen NvLKRX?editors=0010 by GreenSock (@GreenSock) on CodePen


You'll notice that the animation just jumps to each progress() value when you press each button. If you are updating the progress() very quickly you will get a smoother animation but it won't be that great.


TimelineMax has a tweenTo() method that allows you to smoothly animate to any time or label in a timeline. The demo below converts the progress() to a time by multiplying by the duration of the timeline. 


So if your timeline is 10 seconds long and you want to tween to the time that is at the 10% mark you would do 


0.1 * 10 = 5 seconds

var duration = tl.duration();
  tl.tweenTo(0.1 * duration)


So now each time you press a button you will smoothly tween to the new percentage (represented by time)


See the Pen zdJOKX?editors=0010 by GreenSock (@GreenSock) on CodePen

So you may want to check how much of the page is loaded every second and tweenTo the proper time based on that percentage for a smoother result than just setting the progress()


Note: you had an infinitely repeating animation of the sun rays rotating. This gives your timeline an infinite duration and makes dealing with progress() very cumbersome so I had to make it not repeat. I'm not sure how many rotations you want the user to have to see while the page loads but it will need to be a finite amount.


  • Like 5
Link to comment
Share on other sites

Thank You very much for your very exhaustive explanation.


First of all I have to digest some concept regarding what You have done above, in order to make the animation that i want.


I will work on it. Keep you updated if I will in trouble again.





  • Like 1
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.