PatMa Posted May 3, 2020 Share Posted May 3, 2020 ¡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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 4, 2020 Share Posted May 4, 2020 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. 1 Link to comment Share on other sites More sharing options...
PatMa Posted May 4, 2020 Author Share Posted May 4, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 4, 2020 Share Posted May 4, 2020 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? Link to comment Share on other sites More sharing options...
PatMa Posted May 18, 2020 Author Share Posted May 18, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 18, 2020 Share Posted May 18, 2020 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 1 1 Link to comment Share on other sites More sharing options...
PatMa Posted May 18, 2020 Author Share Posted May 18, 2020 Thanks ZachSaucier!!!! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now