Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Build a JavaScript Page Loading Animation With GSAP

by
Difficulty:BeginnerLength:MediumLanguages:
Final product imageFinal product imageFinal product image
What You'll Be Creating

In today's tutorial, we'll learn how to create a JavaScript page loading animation with GSAP, one of the most dominant and popular JavaScript animation libraries available.

To better understand what we’re going to build, check out the demo page. Be sure to click on the menu links to repeat the animation.

These kinds of animations will work really well in combination with page transition libraries like barba.js and Highway.js.

Page Animation Demo

For this tutorial our demo won't live on CodePen. As we need different pages to showcase the animation, I decided that it's better to host it on GitHub. Here's the project structure:

Before we continue, it's worth noting that the inspiration for this demo is taken from Pure Cinema's website.

1. Begin With the Page Markup

Let's describe the markup for the index.html page. This will be similar to the other pages.

Inside it, we'll place:

  • A typical page header
  • The panels that will be responsible for splitting the screen into six equal parts
  • The main element where the page's main content will live

Additionally, we'll import:

With all the above in mind, here's the associated markup:

2. Define Some Basic Styles

As usually, we'll continue with some CSS variables and reset styles:

Two things to note:

  • The panel-width variable will determine the panel width.
  • The page height will be equal to the viewport height.

3. Specify the Main Styles

Let's now concentrate on the main styles. We'll leave out the header styles as they haven't any importance.

Panel Container

The panel container will be a fixed positioned and fullscreen element. It will be horizontally centered and skewed to a certain degree. Besides, due to its distortion, its width will always exceed and depend on the viewport width. As we're going to animate its clip-path property later, we'll define a default value for this property that will denote the full visibility of the element. 

The Panels

The panels will be absolutely positioned elements, and their width and left property values will depend on the panel-width variable. That said, the left value for the first panel will be 0, for the second one around 16.666%, for the third one around 33.333%, and so on. Plus, initially, they will be invisible. When the page loads, they will appear with a slide-in animation either from top to bottom or from bottom to top. 

Main Element

The main element will be fullscreen with horizontally and vertically centered content. In this case, it will contain only a heading, but if you use content whose height exceeds the viewport height, a scrollbar will appear. Initially, only 20% of it will be visible. When the page loads, the whole element will appear. 

Here are the relevant styles:

Note: if you check the left value of the panels, you'll notice there's an outer calc() function. Its job is to make the panels overlap a little bit, and thus prevent the white borders between the adjacent panels. The subtrahend values (e.g. -2px) came from trial and error.

The white lines that appear between the panelsThe white lines that appear between the panelsThe white lines that appear between the panels

4. Fire the Animations

Let's now put GSAP on the game. 

To create the animations, we'll take advantage of Timeline, an animation tool that will give us the ability to create a sequence of tweens/animations.

So first, we'll create a Timeline and set its state as paused. In this way, the animations inside it won't play by default. When the page has fully loaded, they will play thanks to its play() method.

Inside it, we'll add a sequence of tweens by using its to() method. This method can receive the following parameters:

  • The DOM element that we want to animate.
  • An object that will contain the properties that should be animated along with their respective end values. This object can receive additional properties like the duration one that will control the animation duration in seconds.
  • The placement of the tween in the timeline. In other words, when this tween should run. If we don't specify a value for it, it will be added to the end of the timeline.

In our case, the animation chain will be as follows:

  1. The first and last panels will appear. The animation duration will be 1 second.
  2. The other panels will start appearing 0.5 seconds before the end of the timeline. The animation duration will be 0.5 seconds. Note that we omit the duration property as its default value is 0.5
  3. All the panels will start disappearing with a 0.05 seconds delay between each other. That said, the first panel will start, then the second one after 0.05 seconds delay will continue, then the third one after 0.1 seconds delay, and so on. The animation duration will be 0.3 seconds.
  4. The panel container will disappear via the clip-path property. The animation duration will be 1 second.
  5. Finally, the page's main element will start growing via the clip-path property 0.3 seconds before the end of the timeline. The animation duration will also be 1 second.

Let me explain one tricky thing about the first two tweens.

The slide-in animation of all panels will finish at the same time. Remember that it will last 1 second for the first and last panels, while 0.5 seconds for the other ones, yet in this case, it will start 0.5 seconds earlier. This behavior isn't clear enough in our demo because the styles hide a part of the first and last panels. But, if we remove the skew from the panel container and give it width: 100vw, we'll be able to test it. Consider this CodePen demo.

Here's the associated JavaScript code:

Of course, you can use the browser console to check the footprint left by the plugin.

GSAP footprintGSAP footprintGSAP footprint

Bonus

We can use the Timeline's duration() method to retrieve its duration. In our case, this will be 3.25 seconds. Let's understand the origin of this number:

  • 1 second from the first tween
  • 0 seconds from the second one as it will finish at the same time as the first one.
  • 0.55 seconds from the third one as the last panel will start disappearing with 0.25 seconds delay (0.05 seconds x 5). So, the total time will come from the addition of the delay and the animation duration (i.e. 0.25 + 0.3).
  • 1 second from the fourth one
  • 0.7 seconds from the last one as it will start 0.3 seconds before the end of the timeline. 

Conclusion

Congrats, folks! We managed to build an attractive page loading animation by taking advantage of the GSAP animation library. This project is nothing more than a very small sample of the GSAP capabilities. Feel free to extend it according to your needs (e.g. make the tweens faster), thus expand your GSAP knowledge. Even better, try to incorporate it into a page transition library like barba.js.

If you want more GSAP tutorials or tutorials related to other animation libraries, let us know via social media.

As always, thanks a lot for reading!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.