Scrolling animations with Animate.css and WOW.js

written in css, javascript

Animations without jQuery? Madness!

I’ve been working on a website for a customer for a few months, it’s gone through several design changes, but I think I’ve finally found the right fit. I can’t share it with you until it goes live, but picture a single page site with a scroll over hero (like the home page of this blog).

As I was scrolling through the page, I thought we could do something special with the images and larger blocks of text. I’ve seen several other sites that fade in or slide up images as you scroll down and thought it would be a nice bit of polish to the site.

I came across 2 libraries that work really well with each other: Animate.css and WOW.js

Animate provides a set of predefined CSS animations, similar to the animations provided by Keynote or PowerPoint. And WOW.js adds the ability to trigger these animations as the user scrolls. Exactly what I was looking for.

It’s incredibly simple to set up. Your basic html structure is as follows:

<html>
  <head
    <!-- import animate style sheet -->
    <link rel="stylesheet" href="animate.min.css">
  </head>
  <body>
  <!-- import and set up wow.js -->
    <script src="js/wow.min.js"></script>
    <script>
    new WOW().init();
    </script>
  </body>
</html>

To add animation to something simply add the animated class and the name of your animation, e.g. fadeInUp (Full list of animations are on GitHub)

So if we wanted to animate an h1 element we could do:

<h1 class="animated fadeInUp">Hello World</h1>

If we want to only animate these elements when the user scrolls down we can remove the animated class and add the wow class like so:

<h1 class="fadeInUp wow">Hello World</h1>

A demo of the libraries can be seen below. The animations only trigger once, so refresh the page if you miss them.

Remember, with great power comes great responsibility!

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat


Comments