Updating percentage based on a Timeline

[Dave Laez]

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.

 

Dave
 

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

[Carl]

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:

 

tl.progress(0.8);

 

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();
  
$("#p10").click(function(){
  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.

 

[Dave Laez]

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.

 

Regards,

Dave