To raised perceive what we’re going to construct, try the demo web page. Remember to click on on the menu hyperlinks to repeat the web page loading JavaScript animation.

As each JS animations have similarities, I am going to borrow some content material sections from the earlier tutorial. This can assist maintain every tutorial detailed and unbiased. 

Net web page loading animation JavaScript demo

For this tutorial our internet web page loading animation demo received’t reside on CodePen. As we want completely different pages to showcase the JS web page loading, I made a decision that it’s higher to host it on GitHub. This is the venture construction for the JS web page loading:

Earlier than we proceed, it’s value noting that the inspiration for this web page loading animation JavaScript demo is taken from the reasonably beautiful 9 Orchard’s web site.

1. Start with the web page markup

Let’s describe the markup for the index.html web page. This will probably be just like the opposite pages.

Inside it, we’ll place:

• A typical web page header
• The panels that will probably be answerable for splitting the display into seven equal elements.
• The principle aspect the place the web page’s foremost content material will reside.

Moreover, we’ll import:

With all of the above in thoughts, right here’s the related markup for the animation with JavaScript:

Take into account the inline types that we add to the panels. As we’ll see later, we’ll use the index CSS variable to animate them. The larger the worth, the extra time it’s going to take for the related aspect to animate.

2. Outline some fundamental types for JS web page loading

Subsequent, we’ll proceed with some CSS variables and reset types:

Three issues to notice:

• The panel-width variable will decide the panel width.
• The web page peak will probably be equal to the viewport peak.
• We’ll disguise any potential scrollbars that may seem relying on the quantity of web page content material.

3. Specify the principle types for the JS web page loading

Let’s now consider the principle types for the web page loading JavaScript animation. We’ll omit the header types as they haven’t any significance.

The panels

The panels will probably be fixed-positioned components, and their width and left property values will depend upon the panel-width variable. That stated, the left worth for the primary panel will probably be 0, for the second round 14.28%, for the third one round 28.5%, and so forth. Their peak will probably be equal to the viewport peak and invisible by default. We’ll use the clip-path property to squeeze and transfer them to the underside a part of the web page.

Fundamental aspect

The principle aspect will probably be fullscreen with horizontally and vertically centered content material. For simplicity, we’ll solely put a heading and a hyperlink, however you may put something you want. Once more, by default, all this content material will probably be invisible and sit 100px away from its unique place. 

Listed here are the related types of the web page loading JavaScript animation:

information

in case you verify the width worth of the panels, you’ll discover there’s an additional pixel. Its job is to make the panels overlap just a little bit, and thus stop the blue borders (their coloration will depend upon the web page coloration) between the adjoining panels.  

4. Fireplace the JS animations

When the web page masses, the next web page loading JavaScript animations need to play on this order:

1. First, the panels ought to seem from backside to prime.
2. Then, the panels ought to disappear and transfer to the highest.
3. Lastly, all web page contents ought to grow to be seen.

Throughout the first two steps, the panels will probably be transitioned with some delay. As we’ve mentioned earlier than, it will depend upon the worth of their index variable.

Mimic a timeline

To create a sequence of tweens as we did the final time with GSAP’s Timeline, we’ll take benefit of a lesser-known occasion known as transitionend. This occasion fires every time a CSS transition finishes and provides us the flexibility to synchronize web page loading JS animations.

After all, we aren’t fascinated about all transitions, as a substitute, we solely care concerning the panels’ transitions and particularly the transitions of the final JS animated panel. In our case, the final animated panels would be the first and seventh (final) ones as each have index: 3. 

As you’ll see within the code, we’ll work with the final one, however we may equally have used the primary one. To raised perceive it, attempt to give the chosen panel a big delay of round 1s and see how the JavaScript animations get out of sync.

By way of the code logic, we’ll do the next issues on this order:

1. First, when the web page masses, we’ll add the loaded class to the physique.
2. Then, we’ll wait until the transition of the final panel finishes—this will fireplace twice in complete. At that time, we’ll add one other class to the physique. The primary time we’ll add the second-round class, whereas the second time, we’ll add the third-round.

After the completion of our transitions, the physique may have these courses:

Right here’s the JavaScript code:

As an alternative of the load occasion, we may have used the DOMContentLoaded occasion.

And the corresponding types of the web page loading JS animation:

Now you understand how to place collectively a web page loading JS animation!

Congrats, of us! We managed to construct a horny JavaScript web page loading animation by staggering animations due to the transitionend occasion. Clearly, for extra heavy use of web page loading JS animations, a library like GSAP is a extra strong method to observe. Be happy to increase the demo as you want and share it with me!

As all the time, thanks so much for studying!

Extra tasks to observe

Check out these tasks on Tuts+ that use the clip-path property to use completely different sorts of animations.