To higher perceive what we’re going to construct, try the demo web page. Make sure you click on on the menu hyperlinks to repeat the animation.
As each animations have similarities, I’ll borrow some content material sections from the earlier tutorial. This can assist preserve every tutorial detailed and impartial.
Web page Animation Demo
For this tutorial our demo received’t dwell on CodePen. As we’d like totally different pages to showcase the animation, I made a decision that it’s higher to host it on GitHub. This is the venture construction:
1 |
panels-animation/ |
2 |
├── about.html |
3 |
├── contact.html |
4 |
├── index.html |
5 |
├── essential.css |
6 |
└── essential.js |
Earlier than we proceed, it’s price noting that the inspiration for this demo is taken from the moderately pretty 9 Orchard’s web site.
1. Start With the Web page Markup
Let’s describe the markup for the index.html web page. This can be much like the opposite pages.
Inside it, we’ll place:
- A typical web page header
- The panels that can be liable for splitting the display screen into seven equal elements.
- The
essentialcomponent the place the web page’s essential content material will dwell.
Moreover, we’ll import:
With all of the above in thoughts, right here’s the related markup:
1 |
<!doctype html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<meta identify="viewport" content material="width=device-width, initial-scale=1"> |
6 |
<hyperlink rel="preconnect" href="https://fonts.gstatic.com"> |
7 |
<hyperlink rel="stylesheet" href="https://fonts.googleapis.com/css2?household=Montserrat:wght@400;700&show=swap"> |
8 |
<hyperlink rel="stylesheet" href="essential.css"> |
9 |
<title>Easy JavaScript Web page Loading Animation</title> |
10 |
</head>
|
11 |
|
12 |
<physique>
|
13 |
<header class="page-header"> |
14 |
<nav>
|
15 |
<ul>
|
16 |
<li>
|
17 |
<a href="index.html">Dwelling</a> |
18 |
</li>
|
19 |
<!-- extra listing gadgets -->
|
20 |
</ul>
|
21 |
</nav>
|
22 |
</header>
|
23 |
|
24 |
<ul class="panels"> |
25 |
<li class="panel" type="--index: 3"></li> |
26 |
<li class="panel" type="--index: 2"></li> |
27 |
<li class="panel" type="--index: 1"></li> |
28 |
<li class="panel" type="--index: 0"></li> |
29 |
<li class="panel" type="--index: 1"></li> |
30 |
<li class="panel" type="--index: 2"></li> |
31 |
<li class="panel" type="--index: 3"></li> |
32 |
</ul>
|
33 |
|
34 |
<essential class="page-main"> |
35 |
<div>
|
36 |
<h1>Dwelling Web page</h1> |
37 |
<!-- put extra content material right here -->
|
38 |
</div>
|
39 |
</essential>
|
40 |
|
41 |
<script src="essential.js"></script> |
42 |
</physique>
|
43 |
</html>
|
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 component to animate.
2. Outline Some Fundamental Kinds
Subsequent, we’ll proceed with some CSS variables and reset types:
1 |
:root { |
2 |
--panel-width: calc(100% / 7); |
3 |
--darkblue: #02020c; |
4 |
--white: #fff; |
5 |
--lightgray: #fafafb; |
6 |
}
|
7 |
|
8 |
* { |
9 |
padding: 0; |
10 |
margin: 0; |
11 |
box-sizing: border-box; |
12 |
}
|
13 |
|
14 |
ul { |
15 |
list-style: none; |
16 |
}
|
17 |
|
18 |
a { |
19 |
shade: inherit; |
20 |
text-decoration: none; |
21 |
}
|
22 |
|
23 |
h1 { |
24 |
font-size: 3rem; |
25 |
}
|
26 |
|
27 |
physique { |
28 |
top: 100vh; |
29 |
font-family: "Montserrat", sans-serif; |
30 |
shade: var(--white); |
31 |
background: var(--darkblue); |
32 |
overflow: hidden; |
33 |
}
|
Three issues to notice:
- The
panel-widthvariable will decide the panel width. - The web page top can be equal to the viewport top.
- We’ll conceal any potential scrollbars that may seem relying on the quantity of web page content material.
3. Specify the Most important Kinds
Let’s now focus on the essential types. We’ll miss the header types as they haven’t any significance.
The Panels
The panels can 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 can be 0, for the second round 14.28%, for the third one round 28.5%, and so forth. Their top can be equal to the viewport top 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.
Most important Ingredient
The essential component can be fullscreen with horizontally and vertically centered content material. For simplicity, we’ll solely put a heading and a hyperlink, however you possibly can put something you want. Once more, by default, all this content material can be invisible and sit 100px away from its authentic place.
Listed below are the related types:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.panels .panel { |
4 |
place: fastened; |
5 |
prime: 0; |
6 |
left: 0; |
7 |
backside: 0; |
8 |
width: calc(var(--panel-width) + 1px); |
9 |
clip-path: inset(100% 0 0 0); |
10 |
background: var(--lightgray); |
11 |
transition: all 1s cubic-bezier(0.25, 1, 0.25, 1); |
12 |
}
|
13 |
|
14 |
.panels .panel:nth-child(2) { |
15 |
left: var(--panel-width); |
16 |
}
|
17 |
|
18 |
.panels .panel:nth-child(3) { |
19 |
left: calc(var(--panel-width) * 2); |
20 |
}
|
21 |
|
22 |
.panels .panel:nth-child(4) { |
23 |
left: calc(var(--panel-width) * 3); |
24 |
}
|
25 |
|
26 |
.panels .panel:nth-child(5) { |
27 |
left: calc(var(--panel-width) * 4); |
28 |
}
|
29 |
|
30 |
.panels .panel:nth-child(6) { |
31 |
left: calc(var(--panel-width) * 5); |
32 |
}
|
33 |
|
34 |
.panels .panel:nth-child(7) { |
35 |
left: calc(var(--panel-width) * 6); |
36 |
}
|
37 |
|
38 |
.page-main { |
39 |
show: flex; |
40 |
top: 100%; |
41 |
padding: 100px 15px; |
42 |
overflow-y: auto; |
43 |
}
|
44 |
|
45 |
.page-main > div { |
46 |
text-align: middle; |
47 |
margin: auto; |
48 |
}
|
49 |
|
50 |
.page-main > div > * { |
51 |
opacity: 0; |
52 |
transition: all 0.5s ease-out; |
53 |
}
|
54 |
|
55 |
.page-main h1 { |
56 |
rework: translateY(-100px); |
57 |
}
|
58 |
|
59 |
.page-main p { |
60 |
font-size: 20px; |
61 |
margin-top: 20px; |
62 |
rework: translateY(100px); |
63 |
}
|
data
in the event 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 forestall the blue borders (their shade will depend upon the web page shade) between the adjoining panels.
4. Hearth the Animations
When the web page masses, the next animations should play on this order:
- First, the panels ought to seem from backside to prime.
- Then, the panels ought to disappear and transfer to the highest.
- Lastly, all web page contents ought to turn out to be seen.
In the course of the first two steps, the panels can be transitioned with some delay. As we’ve mentioned earlier than, this may 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 offers us the power to synchronize animations.
After all, we aren’t serious about all transitions, as an alternative, we solely care in regards to the panels’ transitions and particularly the transitions of the final 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 higher perceive it, attempt to give the chosen panel a big delay of round 1s and see how the animations get out of sync.
By way of the code logic, we’ll do the next issues on this order:
- First, when the web page masses, we’ll add the
loadedclass to thephysique. - Then, we’ll wait until the transition of the final panel finishes—this will hearth twice in whole. At that time, we’ll add one other class to the
physique. The primary time we’ll add thesecond-roundclass, whereas the second time, we’ll add thethird-round.
After the completion of our transitions, the physique may have these courses:
Right here’s the JavaScript code:
1 |
const physique = doc.physique; |
2 |
const lastPanel = doc.querySelector(".panels .panel:last-child"); |
3 |
|
4 |
window.addEventListener("load", () => { |
5 |
physique.classList.add("loaded"); |
6 |
|
7 |
lastPanel.addEventListener("transitionend", () => { |
8 |
if (physique.classList.comprises("second-round")) { |
9 |
physique.classList.add("third-round"); |
10 |
} else { |
11 |
physique.classList.add("second-round"); |
12 |
}
|
13 |
});
|
14 |
});
|
As an alternative of the load occasion, we may have used the DOMContentLoaded occasion.
And the corresponding types:
1 |
.loaded .panels .panel { |
2 |
clip-path: inset(0); |
3 |
transition-delay: calc(var(--index) * 0.06s); |
4 |
}
|
5 |
|
6 |
.loaded.second-round .panels .panel { |
7 |
clip-path: inset(0 0 100% 0); |
8 |
}
|
9 |
|
10 |
.loaded.third-round { |
11 |
overflow: auto; |
12 |
}
|
13 |
|
14 |
.loaded.third-round .page-main > div > * { |
15 |
opacity: 1; |
16 |
rework: none; |
17 |
}
|
Conclusion
Congrats, of us! We managed to construct a sexy JavaScript web page loading animation by staggering animations due to the transitionend occasion. Clearly, for extra heavy use of animations, a library like GSAP is a extra sturdy method to observe. Be happy to increase the demo as you would like and share it with me!
As at all times, thanks loads for studying!
Extra Initiatives to Follow
Check out these initiatives on Tuts+ that use the clip-path property to use totally different sorts of animations.
