Page preloader where there will be a progress bar and percentage while the js and images are still loading..

[Louienator]

Hi is that possible in gsap to have a preloader, then animate everything after the preloader/js assets are done loading? And that preloader will just be shown on the first page only, and if cached, it will not show?

 

I have no working pen on that, just a thought if it's possible?

 

Thank you so much.

[Rodrigo]

Hi,

 

Sure thing, just make sure that your preloader has some callback so once everything is loaded you can execute your code with your animations. As for caching I'm not completely sure about checking that particular situation. I know that HTTP has cache control but nothing beyond that, so you'll have to do some research in order to achieve that particular part.

 

Here is an example (old) that uses a spinner and a canvas preloader to load some images:

See the Pen AWXJvK by rhernando (@rhernando) on CodePen

 

Is not exactly what you're looking for, but hopefully is enough to get you started.

Happy Tweening!

[Louienator]

Hi Rodrigo,

 

Thanks for the reply. Here's an example of what i want to achieve.

https://levora.cuberto.com/
https://www.heights.agency/

and smooth scroll and scroll reveal
https://sussextaps.com.au/

[Cassie]

Hi there - yep, all of that is possible. Do you have a specific question about a part of it?

[Louienator]

Hi Cassie, i was wondering on how to achieve the percentage and progress bar and show the contents once the progress bar is finished loading all the js components..

 

[Cassie]

From a setup perspective @Rodrigo's already shared an example that does this. There are many different ways you could approach it though. A lot of progress bars aren't even linked up to the page load or asset loading, they're just aesthetic. (not that I recommend that 🫠)

Did you take a look at it, is there something you don't understand?

The aesthetic side (progress bar and showing contents) really just depends on what the animation looks like. There's no one solution or out of the box plugin here.

 

There are onComplete callbacks you could make use of. They run at the end of a tween or timeline. Here's some pseudocode - a simple tween that's showing some hidden content when onComplete gets called:

onComplete: () => { 
  gsap.to(".hiddenContent", {autoAlpha: 1})
}

 

Maybe the getting started guide would be helpful?

 

[Louienator]

Thanks Cassie and Rodrigo.. Will try to experiment with this one later.. Thank you so much and have a great day ahead..

[Louienator]

And oh, how does the percentage be achieved, while waiting for the js to load? and the percentage will depend on the net connection or the js loaded.. thanks..

[GreenSock]

13 hours ago, Louienator said:

And oh, how does the percentage be achieved, while waiting for the js to load? and the percentage will depend on the net connection or the js loaded.. thanks..

We really try to keep these forums focused on GSAP-specific questions, sorry. 

 

To get the percentage, you'd need to figure out all the things that are loading, their sizes, and then do the math as things load. Again, none of this has anything to do with GSAP which is just a high-speed property manipulator.  

[Louienator]

Hi Jack, is there an equivalent to $( window ).on( 'load', function() {});  where the animation will execute after the js/jquery and images are loaded? Because, i think $( window ).on( 'load', function() {} ); is deprecated..

Thanks..

[GreenSock]

Sure. That's just standard JavaScript: 

window.addEventListener("load", () => {
  // your code here
});

👍

[Louienator]

Thank you so much Jack, will try this.. thank you so much

 

[Mattrudd]

On 4/23/2023 at 11:20 PM, Cassie said:

A lot of progress bars aren't even linked up to the page load or asset loading, they're just aesthetic. (not that I recommend that 🫠)

Hey @Cassie! Hope you're really well.

Just curious - found this thread after searching high and low for the right mix of imagesloaded.js/preload.js style preloading library to hook up with a GSAP progress animation...

Pretty much all the walkthroughs/examples I can find don't link up to real asset/page load, as you mentioned... they just use a callback on preload complete, firing a timeline with an arbitrary length. 

 

Maze of options to tie the animation to real progress, which is my preference!

So my question - why would you recommend linking it to real page load time? My instinct is that's a bit more honest and UX friendly... but also keen not to have a progress bar fade out too early, say if it's not reached 100%.

[Rodrigo]

Hi @Mattrudd,

 

The example I linked above is using ImagesLoaded by David DeSandro:

See the Pen AWXJvK by rhernando (@rhernando) on CodePen

 

Sure it has a lot of other stuff that might not be needed, but the core is there:

imgContainer.imagesLoaded().progress(loadProgress);

Happy Tweening!

[Mattrudd]

@Rodrigo thanks for that, kind of you…

 

I think I’m going for a jquery solution that uses a document.onreadystatechange function…

 

Just still unsure about pros/cons of faking the loading duration is all!