CSS animation will wait

Translation of the article Making Animations Wait by Donovan Hutchinson.

Recently, I launched a CSS animation course for designers and developers who want to improve their web animation skills. When I was working on a course, I ran into a problem when the animation of the content begins before the files load. This article describes the method that I use to solve this problem, and which ensures that all the animation will start when it is supposed to.

With all this happened. For example, we want our hero header to appear smoothly when loading, so we add fade-in keyframes, set up the animation, but the animation begins before the background image of this block loads. As a result, we get a gently appearing half-loaded image, or even worse - our logo or title appears before the background is loaded.

Fortunately, there is a way to fix this.

Problem: parallel events

When we go to the site, the browser tries to do everything as fast as it can: it loads and renders HTML and CSS and at the same time loads other necessary files, such as images.

This method of loading means that we can almost immediately see some layers and text content, but if the site has a large journal-type header, the image may not be downloaded in time.

Let's use some built-in browser tricks to pause the animation until you need it.

The load event and the animation-play-state property

Browsers send us a convenient load javascript event when all the content is loaded. This event will be triggered for items such as pictures and scripts. We can use it to control our animation.

We are going to use the script to listen for the load event and the animation-play-state CSS property to pause the animation until the event occurs.

Here is the script

document.body.className += " js-loading"; window.addEventListener("load", removeLoadingClass, false); function removeLoadingClass() { document.body.className = document.body.className.replace("js-loading", "";); } 

In the first line, the js-loading class is added to the body element.

Then the interception of the event is set.

When the load event occurs, the removeLoadingClass function is run. At this point, all the pictures and other site files are uploaded.

Finally, the removeLoadingClass function removes the js-loading class from the body.

This code should be placed in the head of your site. If you load it from a third-party file, the CSS may load before this script works, which will allow the animation to start ahead of time.

You can use this class to pause all animations on a page until all the content has loaded.

Waiting for one image

The method described above waits until all files for the page are loaded. Perhaps you want to wait only for loading one image, for example for your header. Fortunately, the download event works for each image separately. The approach described in Measuring Image Widths in JavaScript can help with this.

We can set the focus to one specific image.

 // Adjust the "querySelector" value to target your image var img = document.querySelector("img"); document.body.className += " js-loading"; img.addEventListener("load", removeLoadingClass); function removeLoadingClass() { document.body.className = document.body.className.replace("js-loading", ""); } 

The animation-play-state property

The animation-play-state property is well supported by modern browsers. It tells the browser when the current animation needs to be started or stopped. By default, the animation is running.

We can use this property to pause any animation on a page while the content is loading. Add this code to CSS

 .js-loading *, .js-loading *:before, .js-loading *:after { animation-play-state: paused !important; } 

This code pauses all animations on the page, as long as body has a js-loading class. It applies also to all pseudo-elements: before and: after.

When the script removes the body js-loading class, the CSS rule is not applied and all animations are started at the right moment.

A nice bonus of this method is that you do not need to change anything in our styles.

What if js doesn't work?

This is a question that must always be asked if we use javascript to work with content. Sometimes js fails. It can be turned off. Plugins may do unexpected things. Although in most cases everything works, javascript is always a little under our control, so it would be good to think about what will happen if it does not work as expected.

In this case, we are fine. If javascript doesn't work, then the js-loading class will not be added, and the animation will work right away. This may give a slightly strange result when the background image is loaded during animation, but this is the worst case scenario and a reasonable fallback.

Let's see in action

Let's look at the test how it works. We need big pictures. For example, Nasa photo on Unsplash , its size is about 2 MB.

First, while the page loads, we will see a blank screen. To truly see everything in action, you can use the built-in property in Chrome. Open the inspector, select the Network tab, then select the download speed settings in the drop-down menu. Take Good 3G, which is slow enough to see the work of our script.

Click "Rerun" on the demo example, and you will see that there will be no animation until the image is loaded. You can also try to disable javascript (and clear the cache before rebooting) to see the difference.

Load indicator

If you want to avoid a blank page, you should use some explanatory text or animation that will let users know what is happening. The choice depends on how long you think the download will take place. If you have an extremely large image and the wait is more than 1-2 seconds, then the indicator will be a good option.

On the other hand, it is probably better to compress a stronger image or reduce it so that the load is faster. Experiment and see which option is best for you.