How to display the preloader fill color loader

[Narendra Verma]

Hello,

I am display the pre loader on my website. What I am doing is, I have to show background color from left to right slide and then display the progress bar with count and once count 100% done then  my background color from will end from left to right and display my content which in s my  website.

 

I found the example here but it's using  https://greensock.com/forums/topic/22912-just-want-to-share-a-preloader-progress-bar/

 

.

 

See the Pen BaKZqBx?editors=0010 by Narendra_verma (@Narendra_verma) on CodePen

[akapowl]

Hey @hybreeder and welcome.

 

First things first:

In your pen you are using (old) GSAP and ScrollMagic (which isn't a GreenSock product) syntax but you are not loading any js-file of either one.

 

Check the pen in this thread first - it provides everything you need, to get a GSAP-related pen up and running.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Cheers,

Paul

 

 

[Narendra Verma]

@akapowl, I updated my code pen, Can you check it once.

 

I know ScrollMagic is not GSAP product. Can you help me in  GSAP script

[akapowl]

 

I am not sure, I really undertstand your question and what you want to achieve there. Can you maybe try and re-phrase your question?

 

Or is this what you are trying to achieve?

 

See the Pen d41c3d85b7fea5e95d5b68491446190d by akapowl (@akapowl) on CodePen

 

 

 

If so, I do not see the need to use ScrollMagic here at all, since your animation is not dependent on scrolling what so ever.

 

If you want to add scroll-based animation later on, it would be best to use GSAP's ScrollTrigger-Plugin then.

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

Besides that, there were a couple of issues with your code:

At one point, you had a > too much in your HTML markup.

Furthermore, you are trying to adress a '#count' in your js, which is not even in your HTML in the first place - there is only a div with a class of count.

 

Also, I re-ordered the contents of your "gsap_loader" a bit, so you can tween the scaleX and not the width of your progressbar, and thus, be able to set the transformOrigin - which, as far as I know, is not possible for when you are tweening the width of an element.

 

What you can and should always do, is really try and rule out all general errors in your HTML, CSS and JS first.

 

I am sure, there might be a more elegant way to do this, too.

Nevertheless, let me know, if this helps.

 

Cheers,

Paul

 

 

 

[Narendra Verma]

@akapowl Yes, It's working as my expected. Thank you so much the information.

 

 

 

[Narendra Verma]

@akapowl Your above code is working, I have one doubt I used below code.

 

First I am displaying the  loader and after completing the loader I have to animate my header text so I used below code. Now the issue is, when loader animating in the background my header animation is also showing complete.

 

I want after complete the loader then start  header text animate.

 

window.onload = function () {
  tween.play();
 var tl = gsap.timeline();
  tl.from(".universalSearch", 1, { opacity: 0, y: 30 })
     .from(".socialList",1,{opacity:0},1)
}

[akapowl]

 

That's because the way you set things up, your timeline starts running on window load.

 

See my pen, I set the 

 

var tween = gsap.timeline({ paused: true })

 

tween timeline to paused and on window load, I say:

 

window.onload = function () {

  tween.play();

}

 

 

 

You could do it in a similar way. For example, you could add an onComplete-function to the .overlay-tween, that reveals the content, and make the text-tween run from there on ( Note: i changed things up a bit in the JS)

 

See the Pen 915b57301c58765f3d18fbb79058e839 by akapowl (@akapowl) on CodePen

 

 

 

Imagine it like this with your code:

 

First, in Global-Scope, you set up all the timelines, that you want to be played, when the time has come.

You set them to be paused, so, when the time has come, you can trigger their start.

 

On window load, the so far paused loadingTween-timeline gets the order to be played.

That timeline has an onComplete-function on its last tween, that contains the order for the so far paused revealContentTL-timeline to be played, and that one has an onComplete-function to trigger the start of the so far paused text-animation timeline.

 

I hope this makes sense to you, since you seem to be fairly new to this (no offense inteded).

 

I'd suggest, you take a deeper look into the docs - maybe on timelines - because I really think, there are more efficient ways to write the code for your needs - you could actually do all you want to do there within just one larger timeline:

 

See the Pen c2384d5e570cc1e247b58bafd414f21b by akapowl (@akapowl) on CodePen

 

 

 

You will be benefiting from the docs a lot, when it comes to learning things with GSAP.

 

https://greensock.com/docs/v3/GSAP/Timeline

 

Cheers.