Sequential Landing Page Animation Effects with CSS3
This page may contain links from our sponsors. Here’s how we make money.
Custom animation adds a certain vivacity into website layouts. Web animation gives off the illusion of motion and brings a page to life with dynamic moving parts.
I set out to create dynamically-animated elements that would chain through a series of events once the page finishes loading. This can be seen on many product pages and landing pages with elements like demo screenshots or feature lists.
In this post, I’ll show how to use CSS3 animations triggered by jQuery to create sequential page effects. Every element on the page is hidden by default, then animates into view one after another. Check out my live demo below to see how it all works.
Getting Started with Sequential Animation Effects
Instead of writing my own custom easing functions, I’m using Animate.css. This is a free open-source CSS animation library that defines custom effects like easings and bounces.
Download a copy of Animate.css and set that in a directory with a new index.html file. The header should contain a link to animate.css, a link to jQuery, and a link to an empty styles.css stylesheet, which we’ll cover afterward.
Related: To 5 Scroll Animation Effects in Online Animation
<!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Sequential Page Animations - Vandelay Demo</title> <link rel="shortcut icon" href="https://www.vandelaydesign.com/wp-content/themes/vd/assets/graphics/favicon.png"> <link rel="icon" href="https://www.vandelaydesign.com/wp-content/themes/vd/assets/graphics/favicon.png"> <link rel="stylesheet" type="text/css" media="all" href="styles.css"> <link rel="stylesheet" type="text/css" media="all" href="animate.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head>
Getting into the page body you’ll notice there’s not a whole lot of detail. Elements remain in a general structure and they’re called by classes or IDs. However to hide the elements from view without removing them from the DOM I’m using opacity:0 as inline styles.
All the inline properties are overwritten later using jQuery’s show() method.
<div class="wrapper">
<div class="logotxt">
<h1>DesignerApp</h1>
<p class="sublogo" style="opacity:0;">The coolest new tool for UI designers.</p>
</div>
<div class="featured">
<p style="opacity:0;">As featured in:</p>
<ul class="logos">
<li class="fastco" style="opacity:0;"><img src="img/fastco-logo@2x.png" width="220" height="40" alt="fastco"></li>
<li class="mashable" style="opacity:0;"><img src="img/mashable-logo@2x.png" width="220" height="40" alt="mashable"></li>
<li class="cnet" style="opacity:0;"><img src="img/cnet-logo@2x.png" width="43" height="40" alt="cnet"></li>
<li class="verge" style="opacity:0;"><img src="img/verge-logo@2x.png" width="157" height="40" alt="the verge"></li>
<li class="buzzfeed" style="opacity:0;"><img src="img/buzzfeed-logo@2x.png" width="214" height="40" alt="buzzfeed"></li>
</ul>
</div>
</div>
This is important because we only want certain elements to show at certain times.
If you want to avoid inline CSS I highly recommend instead opting for a special class that sets an opacity, then remove that class when the time is right. It may not work as well in all browsers but it will offer cleaner code.
Each logo graphic uses the @2x image size for retina displays. These are just simple transparent PNGs of large publication logos which I found in Google. You can replace them with anything you like and even customize the colors in Photoshop.
Styling the Page
You’ll notice everything is incredibly simple in this layout. I have one main wrapper containing the .logotxt div and the featured images.
The header text uses a custom Google font called Arvo with extra-bolded letters and a drop shadow.
h1 {
font-family: 'Arvo', Helvetica, sans-serif;
font-size: 9em;
font-weight: bold;
letter-spacing: -0.04em;
color: #fff;
text-shadow: 1px 2px 0 #446793;
margin-bottom: 20px;
}
/** page construct **/
.wrapper {
display: block;
max-width: 950px;
margin: 0 auto;
}
.logotxt {
display: block;
text-align: center;
margin-top: 130px;
margin-bottom: 60px;
}
.sublogo {
font-size: 1.75em;
color: #3a567e;
}
.featured {
display: block;
}
.featured p { color: #e0ecf3; text-transform: uppercase; font-weight: bold; margin-bottom: 15px; }
.logos {
display: block;
}
.logos li { display: block; float: left; margin-right: 15px; }
.logos li img {
opacity: 0.55;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.logos li img:hover { opacity: 1; }
One other interesting point is the custom logo image animation. Each image lies inside a list item with each <li> element using 0 opacity. But the images themselves are set to custom opacities within the stylesheet so they blend into the background.
Whenever a user hovers on top of an image it’ll fade into view. It’s a neat effect that doesn’t call too much attention to promotional logos or featured companies, but still presents them as noticeable page items.
These animations use CSS transitions, which are simpler and easier to manipulate than custom CSS animation. This combo leads to an interesting mix of Animate.css easings with very basic transitions for hover effects.
Animating with JavaScript
Moving back to the index.html file, open a new script tag right before the final </body> tag.
Inside we’ll write the chain effects to animate each element into view. This works by showing the element and simultaneously appending the Animate.css classes.
$(function(){
$('.logotxt h1').addClass('animated fadeInUp');
setTimeout(function() { // animate logo tagline
$('.sublogo').show().addClass('animated fadeInUp');
}, 500);
setTimeout(function(){ // animate "featured in" text
$('.featured p').show().addClass('animated fadeInUp');
}, 650);
setTimeout(function(){ // chain logo animations
$('.fastco').show().addClass('animated fadeInDown');
setTimeout(function(){ // animate mashable logo
$('.mashable').show().addClass('animated fadeInDown');
}, 200);
setTimeout(function(){ // animate cnet logo
$('.cnet').show().addClass('animated fadeInDown');
}, 400);
setTimeout(function(){ // animate verge logo
$('.verge').show().addClass('animated fadeInDown');
}, 500);
setTimeout(function(){ // animate buzzfeed logo
$('.buzzfeed').show().addClass('animated fadeInDown');
}, 600);
}, 700);
});
At first, this may appear intimidating but it’s really a long list of chained events. I’m using the setTimeout() method to create delayed instances of jQuery functions.
Each timeout measures in milliseconds and I’ve created arbitrary times based on sequences that look best for the layout.
First is the main page header which animates into view immediately. This element doesn’t need a delay because it starts the whole process. But the tagline(or sublogo) and the “featured in” text both animate about half a second later, followed by a long queue of brand logos.
You should notice every function follows a very similar process. One item is targeted and forced visible using show(). Then jQuery’s addClass() method applies two classes: the .animated class and a fade-in class moving either down or up. These both relate to Animate.css with predefined custom easing effects.
By alternating these animation styles it creates a very unique experience on the page.
And that’s it! Surprisingly simple once you understand how it all works under the hood.
Take a peek at my live demo to see how this works in a real browser.
Wrap-Up
Although this may not be the absolute perfect solution, it’s certainly the quickest way to achieve the effect using plain JavaScript. Although CSS does have its own delay properties it cannot be set to chain which leaves too much room for guesswork.
Keep in mind you can copy my source code and reuse it however you see fit. It can be placed on a portfolio page or even a signup page to animate elements that deserve some attention. But feel free to copy and reuse my source code as needed for any project, and if you have additional suggestions feel free to share in the comments area.
