When you are creating a site with fullscreen background images, you will need to consider adding a preloading screen at some point.
Even if you optimize the images the best you can, downloading them might take a time and your visitors might get frustrated.
What you will learn from this template?
- How to create a custom preloading screen using imagesLoaded and GreenSock.
- How to play a GreenSock timeline while images are loading.
- How to play a GreenSock timeline after loading is completed.
- How to combine CSS and JavaScript animations.
- And much more
I have already covered a simple approach in How To Create A CSS3 Spinning Preloader and How To Create A Custom Preloading Screen.
Now lets have a look how to combine imagesLoaded by David DeSandro and GreenSock.
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.
4. A Simple One Page Template With A Preloading Screen
HTML and CSS
We don’t have to do any changes to the HTML, everything stays the same as in our previous ScrollMagic template.
We just add the imagesLoaded reference to the bottom of the page and add a simple markup for the preloader.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
The preloading screen itself is pretty simple.
<div id="preloader"> <div class="txt"> <p class="txt-perc">0%</p> <div class="progress"><span></span></div> </div> </div>
A full-screen overlay with a text centered on the page. The progress bar is a div.progress with a span inside.
We will be updating the width of the inner span to show the progress of the loading.
We have also .is-loading class on the body by default.
.is-loading {overflow: hidden;}
As you have probably guessed this is to prevent the scrollbars to show while we loading our images.
How to show a custom preloading screen while loading background images?
We create a simplified version of the approach from this CodePen demo by @jellywes.
We use the latest imagesLoaded, because it can detect a loading progress of our background images.
// number of loaded images for preloader progress
var loadedCount = 0; //current number of images loaded
var imagesToLoad = $('.bcg').length; //number of slides with .bcg container
var loadingProgress = 0; //timeline progress - starts at 0
$('.bcg').imagesLoaded({
background: true
}).progress( function( instance, image ) {
loadProgress();
});
function loadProgress(imgLoad, image)
{
//one more image has been loaded
loadedCount++;
loadingProgress = (loadedCount/imagesToLoad);
// GSAP tween of our progress bar timeline
TweenLite.to(progressTl, 0.7, {progress:loadingProgress, ease:Linear.easeNone});
}
We look for all our .bcg containers and on progress run loadProgress() function.
This function adds 1 to loadedCount every time a new image is loaded and updates the progress of a GreenSock timeline progressTl.
Here is the timeline itself.
How to play a timeline while images are loading?
Our progress timeline is paused by default and onUpdate we change the text in the .txt-perc (eg. from 0% to 100%).
//progress timeline
var progressTl = new TimelineMax({
paused: true,
onUpdate: progressUpdate,
onComplete: loadComplete
});
progressTl
//tween the progress bar width
.to($('.progress span'), 1, {width:100, ease:Linear.easeNone});
//as the progress bar width updates and grows we put the percentage loaded in the screen
function progressUpdate()
{
//the percentage loaded based on the tween's progress
loadingProgress = Math.round(progressTl.progress() * 100);
//we put the percentage in the screen
$(".txt-perc").text(loadingProgress + '%');
}
At the same time we are animating the width of the inner span to the overall progress value loadingProgress.
Once the progressTl is completed we tell it to play another timeline using a call back function onComplete: loadComplete.
If you are new to GreenSock, make sure you download the free GreenSock Cheat Sheet.
Here is what happens next.
How to play a timeline after the loading is completed?
loadComplete function returns preloaderOutTl that contains a multiple tweens.
function loadComplete() {
// preloader out
var preloaderOutTl = new TimelineMax();
preloaderOutTl
.to($('.progress'), 0.3, {y: 100, autoAlpha: 0, ease:Back.easeIn})
.to($('.txt-perc'), 0.3, {y: 100, autoAlpha: 0, ease:Back.easeIn}, 0.1)
.set($('body'), {className: '-=is-loading'})
.set($('#intro'), {className: '+=is-loaded'})
.to($('#preloader'), 0.7, {yPercent: 100, ease:Power4.easeInOut})
.set($('#preloader'), {className: '+=is-hidden'})
.from($('#intro .title'), 1, {autoAlpha: 0, ease:Power1.easeOut}, '-=0.2')
.from($('#intro p'), 0.7, {autoAlpha: 0, ease:Power1.easeOut}, '+=0.2')
.from($('.scroll-hint'), 0.3, {y: -20, autoAlpha: 0, ease:Power1.easeOut}, '+=0.1');
return preloaderOutTl;
}
Firstly we are fading out the text away from the screen.
Then we remove class .is-loading from the body to enable scrolling.
Adding a class .is-loaded to the #intro.header-container triggers a CSS transition on the backrgound image.
.header-container {
...
.bcg {
transition: transform 4s ease-out;
transform: scale(1.05);
transform-origin: top center;
}
&.is-loaded {
.bcg {
transform: scale(1);
}
}
}
Once the preloader is out of the viewport yPercent: 100, we hide it completely by adding a class .is-hidden.
#preloader {
...
&.is-hidden {
visibility: hidden;
opacity: 0;
}
}
The last 3 tweens on the timeline are revealing the text on the intro screen.
As you can see we are mixing the power of both the CSS and JS animations to achieve a smooth user experience.
Conclusion
As always, download the files, explore the code and learn how to use ScrollMagic and GreenSock on your own projects.
And if you have any questions, please get in touch in the comments.
Next time we will wrap up this ScrollMagic series and create A Simple ScrollMagic Template with pinned sections.
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.
Hi, am new to this preloader installing. I will explain how i add this to my site. pls correct my mistake.
1.Following added just before closing the body tag.
2. This is added to css
3. added to body tag
It doesnt work. what else should i do. pls help
Hi Rajeev, I would love to help but your questions is too broad. There is a lot of things that could be wrong with your code. Setup a simple CodePen demo with your issue. Thanks
Wondering if this will also work for a one-page template with a video background, or is it specific only to images? If so, how could I modify it to work with pre-loading videos?
Hi John, ImagesLoaded only work with images, but try to use PxLoader that seems to be supporting video. Hope that helps.
Does the ImagesLoaded only work on background images where the image is added in the css? Or will this also work for images added in the html? I have a bunch of images in my html, but very few background images (such as the example provided).
Also, do I have to add the .bcg to every single image that I want adding to the count?
Hi Katie, imagesLoaded works with both inline images and background images applied through CSS.
In my example all background images applied to
.bcgare preloading, but you can create an array of image urls that you want to preload.Please refer to this CodePen and ImagesLoaded documentation for more details.
Hi Petr,
Great tutorials, thanks for taking the time to put them out.
I’ve been using following along the tutorials and made some of my own demo sites, and with all of them get poor rendering in IE Edge/11, have you found the same thing? Do you have any recommendations for improving it? Would Skrollr.js be a better option if you need to support these browsers?
Hi Paul, I will be honest, I am on Mac and did the IE testing through Browserstack, which means that I can’t see what the real issue is on IE Edge.
I don’t think Skrollr would be any different, it’s all about which CSS properties you are trying to animate.
Do you find all the demos in the “5 days with ScrollMagic” series to have the same issue?
Let me know.
Hi Petr,
Thanks for the great tutorials on ScrollMagic I feel like I’ve learned a lot useful stuff.
One issue I have is that I can’t get the “is-light” class to turn on and off when scrolling back up the page, it only seems to turn on and off going down, is there a way to add and subtract the class when going back up the page?
Thanks
Hi Noah, check the first template from the series, it also triggers a class on the nav element.
Thanks Petr,
It works but only for one instance of “.is-light”? If you have that on a few sections it only seems to recognise it once.
Checkout the ScrollMagic 101 course, we cover adding/removing of classes in more detail.
Thanks, I’ll check it out.
Nice tutorial, thanks for sharing.
One question though!
Any reason why the content jumps about when scrolling on a mobile?
And how to disable whatever it is that’s causing it?
Thanks again
Hi Petr,
Does this work when swapping out background images as shown in your parallax scrolling master class?
Thanks,
This preloader would work with any site, the key is to specify which images to preload, in our case it is the
.bcgclass that creates a collection of images for preloading.Changed my Idea, used scroll magic with greensock, then used pxLoader to preload the images this gave me the added flexibility to choose which images where loaded depending if it was a mobile or desktop device.
What do you think about loading html files and css files, neccesary or not really?
Images take usually the most time to download. You can try to load the css for the “above the fold” content if you are concerned about the overall page load, but from my own experience it is not necessary on most projects.
Hi Petr,
I’m having a problem in mozilla with the external webfont that doesn’t load before the preloader, meaning I will stick with an unstyled font during the preload. After the preload the webfont get’s rendered though.
This only happens in mozilla. With chrome and internet explorer it’s fine.
Hi Petr,
I have 2 issues:
1. Internet Explorer doesn’t fully load the page’s content even though it reaches 100%. Chrome, Mozilla, Edge, Opera and Safari don’t have this issue.
2. Mozilla doesn’t load the custom font before load, only after load. Meaning I will need to use a system font for the preload percentage text.