Create animations on page scroll using CSS

Hi there, you probably seen this done many times on web sites before. You get to the site and as you scroll elements will animate in (ex bounce, fade in etc). Today we are going to learn how to do this quickly. For this tutorial we are going to use animate.css this file will have all of our animations already created and you can just pick the ones you want to use. The whole scroll magic will come from a small script called Wow.js  All you have to do is drop it into your page and you are done.

Final Result

 

See the Pen mejvpj

What we will use:

• animate.css – can be downloaded here
• wow.js – can be downloaded here

 

Setup

The reason we are using animate.css is because it comes pre built with almost all animations you can think of. For production i would suggest just copying only the animations that you are using out of the file to keep the size down. If you are just interested in fade animations (up, down, left, right etc) check out our CSS snippet with just fade animations.  Of course you can create your own animations as well.
We even have a tutorial on how to create animations on page load if you want to get your hands dirty and do it yourself.

First things first import our files:

<!--load amimate.css from CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"> 

<!--load WOW js from CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js">
</script>

We are using CloudFlare CDN services  (cdnjs.com which you should too to save on your bandwidth!) to load our files. If you are using WordPress make sure to load the js files appropriately (this makes sure the files won’t conflict with other things you might have going on). Just place this inside your functions.php file in your theme folder (again do this only if you are using WordPress)

/**
 * Register and enqueue a wow script, it doesn't depend on anything
 */
function wow_add_scripts() {
wp_register_script(
        'wow-script',
        get_stylesheet_directory_uri() . '/wow.min.js',
        false,
        '1.0',
        true
    );

    wp_enqueue_script( 'wow-script' );
}

add_action( 'wp_enqueue_scripts', 'wow_add_scripts' );

Now we just need to add initialization of our script on to the html page itself:

<script> new WOW().init(); </script>

If you are using WordPress you can add this to your footer.php or header.php file or inject it using a hook.
You are all done with the setup! If you are using a custom animation css  instead of animate.css then you have to tweak the above line and use an option flag to use a different animation trigger other than ‘animated’ (see the codepen source since it has that option)

All the hard work is now done. Now just add the appropriate CSS too items you want to animate on scroll.

Creating basic html

Let’s create basic html with boxes so we can see our example in action. All we have to do is add the class wow to items you want to animate on scroll as well as the animation you want to use example fadeInLeft . Class wow will trigger the animation that you have selected. So your div might look like this:

<div class="wow fadeInDown box">
  <p>content goes here</p>
</div>

Next lets add quick css to style our box:

.box{
  /*Some basic styling*/
    border: 1px solid #333;
    width: 60px;
    height: 60px;
    padding: 30px;
    text-align: center;
    margin: 10px auto;
    background: #29a7d3;
    color: white;
    border-radius: 50%;
    font-family:  helvetica;
  
}

The final html should look like this:

<!--load amimate.css from CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"> 

<!--load WOW js from CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js">
</script>

<!--Initiate WOW js, can be at the bottom of your file -->
<script> new WOW().init(); </script>

<div class="wow fadeInDown box">
  <p>I am first</p>
</div>

<div class="wow fadeInRight box">
  <p>I am second</p>
</div>

That’s it!
The possibilities are endless! Just remember to not over do it. Share your experience in the comments, and where you think this technique is used the best.