Page preloader with text sliding up 1 by 1

[Louienator]

Hi, I was wondering if there is a way to make the preloader dependent on the internet speed. Alternatively, is it possible to preload the image and JS components while they are still loading, and then display the contents afterward? Also, I'd like the bar to grow horizontally from the center. Once everything is loaded, I want everything to fade out.

Here's an example of an intro from this website where the text slides 1 by 1 vertically: 
https://priyanshsingara.framer.website/

Here's my fiddle:
https://jsfiddle.net/5f1ock0w/1/

Cheers,

Louie V.

[mvaneijgen]

7 hours ago, Louienator said:

preloader dependent on the internet speed. Alternatively, is it possible to preload the image and JS components while they are still loading, and then display the contents afterward?

1. Working backwards from this question you can add all the code you want to happen in the onComplete callback, right now you just add a class, but your can do what ever you like here. 
2. This is sometimes called async, defer, lazy loading and this is not a simple task and can become really technical really fast, this is usually something the tool with which you build your website helps with and not something GSAP can do for you
3. Yeah the tool with which you set this up could give you a value and you then could feed that to the progress value. Instead of window.onload .play you would  then call .onWhatEverIsUpdatingTheLoading .progress(valueYouGetFromThatTool)

7 hours ago, Louienator said:

Also, I'd like the bar to grow horizontally from the center. Once everything is loaded, I want everything to fade out.

Just set transformOrigin: "center center", then it grows from the center

 

Hope it helps and happy tweening! 

[Louienator]

Hi @mvaneijgen,

 

I'm not sure if I'm doing it correctly, but the items just stack up instead of showing in the same position and interchanging one by one.

Here's my fiddle: 

 

https://jsfiddle.net/zmv3gfcj/147/

Thank you @mvaneijgen

[mvaneijgen]

I have no idea what that has to do with preloading pages. This looks like a stagger issue which our own @Carl did some great tutorials on! Check it ou

 

 

 

Hope it helps and happy tweening!