A Simple One Page Template With A Preloading Screen

A Simple One Page Template With A Preloading Screen

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?

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.

100% Privacy. Guaranteed! Powered by ConvertKit

4. A Simple One Page Template With A Preloading Screen

ScrollMagic and GreenSock Preloader

VIEW DEMO DOWNLOAD FILES

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?

imagesLoaded and GreenSock preloading screen

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?

imagesLoaded and GreenSock preloader screen

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?

imagesLoaded and GreenSock preloader screen

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.

100% Privacy. Guaranteed! Powered by ConvertKit

21 thoughts on “A Simple One Page Template With A Preloading Screen

  1. Rajeev

    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

    // a lot of css was here
    

    3. added to body tag

    It doesnt work. what else should i do. pls help

    Reply
    1. Petr Tichy Post author

      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

      Reply
  2. John Fraser

    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?

    Reply
  3. Katie

    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?

    Reply
    1. Petr Tichy Post author

      Hi Katie, imagesLoaded works with both inline images and background images applied through CSS.

      In my example all background images applied to .bcg are 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.

      Reply
  4. Paul

    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?

    Reply
    1. Petr Tichy Post author

      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.

      Reply
  5. Noah

    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

    Reply
      1. Noah

        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.

        Reply
  6. Yaseen

    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

    Reply
  7. Colin Kelly

    Hi Petr,

    Does this work when swapping out background images as shown in your parallax scrolling master class?

    Thanks,

    Reply
  8. Petr Tichy Post author

    This preloader would work with any site, the key is to specify which images to preload, in our case it is the .bcg class that creates a collection of images for preloading.

    Reply
  9. Colin Kelly

    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.

    Reply
    1. Petr Tichy Post author

      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.

      Reply
  10. Ricardo Vieira

    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.

    Reply
  11. Ricardo Vieira

    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.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>