Preloader percent animation

[PatMa]

¡Hola

 

Sorry in advance for my bad english. I need animation developers advices. Please

I begin creative development with react (js not native) and i don't know how websites created preloader with percent animations :

 

https://jasonbradley.co/

 

 

https://heycusp.com/

 

I'm a beginner and i try to use react hooks but I don't know how to create this kind of animation. And above all: how to create the percentage when content is loading. How is it working please ?

Thanks to you nice developers

 

 

[ZachSaucier]

Hey PatMa and welcome to the GreenSock forums.

 

This isn't really a GSAP question as it has more to do with how to judge how much of a page's assets are loading, but I'm happy to help point you in the right direction:

• You need to decide what you want to watch in terms of the loader. Every web page as a load event, but this load event only fires when the DOM is loaded, not when everything is ready. It also doesn't provide a way to show the loading percentage. Most the time sites that have loaders like this are based on other content that has not loaded yet like media (videos, images) and sometimes fonts or other dynamically loaded content. 
• Once you've decided on what you want to watch, you need a way to watch the percentage of how much of it has loaded. This could be as simple as using the load callback for each individual element and animating to the percent of the total number of items loaded (i.e. something like if you're watching 20 images and the second one just finished loading, animate the progress to 10%). Or you could use something more complicated but also more precise like loading things over XMLHttpRequests or some other way of streaming data. 
• Once you have a way of detecting the loading percentage, animating to that value is dead simple with GSAP  It just depends on how your animation is setup as to the specifics.

If you have specific questions, especially related to GSAP, we're happy to help. But most of this process will just require searching for the related subjects listed above.

[PatMa]

Thanks to you a lot ZachSaucier !

Your explinations are very useful!!

 

I'm sorry that my question is not really about GSAP.

Do you have any links about that type of preloader (with your method), animated with GSAP ?

 

thanks again

[ZachSaucier]

3 minutes ago, PatMa said:

Do you have any links about that type of preloader (with your method), animated with GSAP ?

In my previous post, I point out that the implementation depends on what content you're tracking. What content are you needing to track/watch?

[PatMa]

Hello ZachSaucier I'm sorry my computer had some problems.

 

I tried to create a preloader with percentage and add a simple gsap settings. But nothing is happening.

I hope someone can help me on that example. Thanks to you

 

See the Pen gOaQovm by patmag (@patmag) on CodePen

[ZachSaucier]

Several issues there, Pat. The first is that you are comparing a string to a number: 

var perc = ((100 / tot * c) << 0) + '%'; // This is always a string like "10%"

perc === 0 // This will never be true because you are comparing a string with % to a number

The second issue is that it's highly unlikely that your perc value will be exactly 25 for example. You probably want to change the color if it's greater than some amount. I'd also use if/else so that you don't have multiple sets unnecessarily:

if(perc === 100)
  gsap.set(stat, { color: "yellow" });
else if(perc > 75)
  gsap.set(stat, { color: "red" });
else if(perc > 50)
  gsap.set(stat, { color: "brown" });
else if(perc > 25)
  gsap.set(stat, { color: "yellow" });
else if(perc > 0)
  gsap.set(stat, { color: "red" });

Other notes:

• I'd also use innerText instead of innerHTML because it's faster.
• I'd use gsap.set() instead of .style.whatever
• I'd use autoAlpha over opacity (because it automatically changes the visibility to hidden if the opacity is 0).
• I'd drop the opacity/autoAlpha setting since you're changing the display to none.

Happy tweening  

[PatMa]

Thanks ZachSaucier!!!!