Jump to content
Search Community

Help w Simple Preloader Animation

Chris Prieto test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So I started out wanting a preloader which I have currently working but it uses imagesloaded.js which is great for images but cares not for videos. Given my limited knowledge of js/jquery I opted for this simple solution. It seems to work and I only have a video and some bg images to load so I am hoping this will suffice.

 

My problem is I cannot figure out how to have a timeline for the preloader that only plays when preloader is present. And then play the intro timeline once the preloader is finished. I was able to get the intro animation to play after preloader if I stuff it after the fadeOut in the .load function(). It feels wrong and I first tried to do introTl.play(); but I couldn't get it working.

See the Pen WNepBQY by ionz149 (@ionz149) on CodePen

Link to comment
Share on other sites

Hello again, Chris!

 

I'm guessing here, but I think the biggest issue is that the intro timeline didn't have paused: true so when you .play()ed it, it was already done and didn't play again. That and your timeline tweens should be outside of the window load most likely, if that's what your media loading event fires. 

 

You could also smoothen out the ending of the preloadTl by using its onRepeat if you'd like:

 

See the Pen xxKqoJa?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

Hello again, Chris!

 

I'm guessing here, but I think the biggest issue is that the intro timeline didn't have paused: true so when you .play()ed it, it was already done and didn't play again. That and your timeline tweens should be outside of the window load most likely, if that's what your media loading event fires. 

 

You could also smoothen out the ending of the preloadTl by using its onRepeat if you'd like:

 

 

@ZachSaucier I think you nailed it. And all that seems to make a great deal of sense to me.

 

If I were to add another animation to the area commented as:
// or another animation or something

 

would that just be another timeline.play()? ie: somethingTl.play()?

 

Just wanna make sure Im getting this

Link to comment
Share on other sites

1 minute ago, Chris Prieto said:

If I were to add another animation to the area commented as:
// or another animation or something

 

would that just be another timeline.play()? ie: somethingTl.play()?

Sure, it could be. Or just a tween. Whatever :) GSAP chains easily.

 

If it's very long you might want to make the introTl wait for that new timeline to finish before loading.

 

Another option is to not add anything there but just modify the introTl to do whatever animations that you'd like to do. Whatever is easiest for you :) 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...

I wasn't sure wether to start a new thread or continue via comments on this one since they are very much related. So I opted to add comments in the name of keeping things in one place and since it is building from my original pen.

 

Once I put this out into the wild I noticed it was sticking at 100% on more image/video heavy pages. I added a progress bar and percentage counter to better illustrate the issue (maybe the issue?). From my end the js/tweens makes sense so I assume I am probably doing something wrong.

 

I was anticipating it would get to a hundred and promptly go away, however I noticed it sticking to 100% on all major browsers I checked in. On the other end of the spectrum if it loads faster it wont always make it to a hundred but that is less important really. My main concern is people on slower connections sitting there staring at a preloader stuck on 100% (currently happening on my phone, I work in a tall building and my signal is particularly crappy up here if I am not on wifi)

 

Any and all help greatly appreciated.

 

See the Pen ed63425493ba9f23f8dd31823ebbd85d by ionz149 (@ionz149) on CodePen

Link to comment
Share on other sites

13 hours ago, Chris Prieto said:

I was anticipating it would get to a hundred and promptly go away, however I noticed it sticking to 100% on all major browsers I checked in.

13 hours ago, Chris Prieto said:

if it loads faster it wont always make it to a hundred but that is less important really

Both of these are because your "loader" timeline is 100% detached from the actual loading of the page. It just animates for 4 seconds no matter what the load time is. If you really want to keep this behavior, you should move the stuff inside the load listener to its own function and call that in the timeline's onComplete, like so:

 

preloadTl
	.set('#line', {width:0})
	.to('#line', 4, {
    width:'100%',
    onUpdateParams:["{self}"],
		onUpdate:function(tl) {
		  // tl references {self} which is the timeline
		  var tlp = tl.progress() * 100 >> 0;
		  $("#counter").html(tlp+"%");
		},
    onComplete: finishLoading
	})
; 

$(window).on("load", finishLoading);

function finishLoading() { 
  $('html').removeClass("loading");
  // Finish the preload timeline if you'd like
  preloadTl.onRepeat = function(tl) {
    preloadTl.kill();
    // or another animation or something
  }
  introTl.play(); 
}

Or you could hook up the preload timeline to the actual load progress of the page to make it accurate...

  • Like 1
Link to comment
Share on other sites

of course haha I was suspicious it was something like that. I initially had a set of dots so it wasn't so obvious it wasn't working exactly as intended.

 

This is interesting. It does fix the stuck at 100% thing happening on phones tho. So the way you did it, it will at the longest take four seconds (or whatever duration is) and jump up if it finishes earlier?

 

Your second option sounds better but for the time being I at least have that "preloader" going away as it hits 100%.

 

I currently have time to bang some code around so if you have ideas on how I could go about getting the preload timeline to utilize actual page progress I can give it a go. I can't conceive how it would work with the duration in place or how I turn the page's progress into something I can stick in the durations place but I'm gonna start digging around and see what I find.

Link to comment
Share on other sites

7 minutes ago, Chris Prieto said:

the way you did it, it will at the longest take four seconds (or whatever duration is) and jump up if it finishes earlier?

Correct.

 

8 minutes ago, Chris Prieto said:

if you have ideas on how I could go about getting the preload timeline to utilize actual page progress I can give it a go

Your main loading is definitely the images, so you can just look at the progress of those images. You could wait for all  of the images to load or just the ones visible at the top of the page. Here's a post I found on the subject: https://stackoverflow.com/a/42196770/2065702 You'd change the loader timeline's .progress() when the image progress is updated. 

 

I also have an open source asset loader that you could look into if you'd like. None of it currently uses GSAP but you could modify it to work with timelines: https://github.com/ZachSaucier/Asset-Loading-Effects

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...