Using Animate.css with jQuery Waypoints

on

This will be a simple tutorial for Animate.css and jQuery Waypoints and how I use them together. Basically we will use Waypoints to know when the user scrolls to an elements and trigger a CSS3 animation to make our sites more sassy. Although this tutorial is quite straight forward you might need a basic understanding of JQuery and HTML.

Well for a brief explanation of both projects Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects and Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

First we need to add Animate.css to our html, so link it to your head:


<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">

To add an animation you need to add the animated class and the name of the animation, like so:


<img class="animated bounce" src="logo.png">

This will make it move!!! Cool, but it will only do it on load and it will only do it once.

This is where JQuery Waypoints comes in. I will use it so we know when the user scrolls to the element and trigger the animation. To add Waypoints add this tags at the bottom of your body in your html.


<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>

Waypoints can be hard to understand at first, but in plain terms it triggers when the element hits the top of the window or viewport. Waypoints has a lot of cool features like adding an offset so it triggers when the element is in the middle of the viewport, add a callback to the waypoint, know the direction of the scroll and a lot more!!

So first lets code a waypoint. We will need a bit of JQuery knowledge, but the code is quite straightforward. We make a JQuery object and get the id of the element we want to animate in this case #example. We call the waypoints function and tell it to toggle the bounce animation when the element hits the bottom of the viewport.


$('#example').waypoint(function() {
   $(this).toggleClass('animated bounce');
   },
{ offset: 'bottom-in-view' });

Now this will only trigger when it reaches the bottom. Personally I like it to work when you scroll from the top and from the bottom. So the code we need to add is quite simple.


$('#example').waypoint(function() {
   $(this).toggleClass('animated bounce');
   },
});

Now I use a little modification to this method. I take use of the html a little more and get the type of animation from the element. For this I add the animated class to each element I want to have an animation and I add a data attribute telling me the type of animation like so.


<img class="animated" data-animated="bounce" src="logo.png">

And the javascript code will look something like this.

With this I take the animated data attribute from each element that has the class animated and toggle the animation. I have two separate functions in case you want a specific behavior.

I hope you like this tutorial, please leave any comment or question you have right below.

Official tutorials

in case you crave more
Animate.css
JQuery Waypoints

  • Bee Dawson

    it works fine 😀 but when I scroll down the item, in my case a red coloured square div, appears in it’s finished position and then the animation is triggered so it looks a bit messy, is there something i’m doing wrong?

    • Robaum

      Hi Bee,
      could you send me a demo? 🙂

      • Bee Dawson
        • Robaum

          I think I have the solution Bee.
          Add style=”opacity: 0;” to your box div. The thing is that some animations, like the “fadeInLeftBig” which you use, need to start in a certain point for them to look good. In this instance you need to “hide” the div first so the animation triggers and makes it appear again.
          I hope this was the solution you were looking for.

          • Bee Dawson

            that’s worked, I think 😀 Just need to get more than one on the page working now! thanks for your help!

  • Nicholas Shane

    How can I take advantage of the opacity from 0 to 1? so that the image smoothly appears on page?

    • Robaum

      Hi Nick,

      you can take advantage of the opacity depending on the animation. The opacity property in CSS specifies the transparency of an element or in technical terms the degreee in which light is allowed to travel through an object. So opacity 0 will make it completly transparent or invisible and then you can animate it all the way to 1 or solid for a nice “entrance” animation. A nice example for this will be the fadeInLeft animation from animate.css.
      If you are using animate.css you can always look at the code and get an idea of how the initial state of the element should be. For example if the final frame of the animation is at 1 opacity and you want it to appear, then start the element at 0 and viceversa.

      I hope this gave you more clarity on the subject.

      • Nicholas Shane

        Yes, very helpful in understanding the way animate.css works.
        In this fiddle as you scroll down how would I keep the image’s opacity at 0 until the animation starts. As you can see the image is visible until it reaches the point where the animation begins, it then disappears and then fades back in. I have been trying everything to make it hidden until animation starts.

        http://jsfiddle.net/3qy0hs3L/2/

        • Robaum

          I guess you are trying to make something like this?
          http://jsfiddle.net/hdLuwb0s/

          • Nicholas Shane

            oh wow all i had to do was add opacity to img. Thanks for the help great tut, im defiantly passing this along to friends!

          • Robaum

            Thank you Nick. Glad you liked it 🙂

  • Dario Muñoz

    How can I reverse animation with slideInLeft when I scroll up? I have a toggleClass with opacity 1, and my animation element with opacity 0, but doesn’t work

    • Robaum

      Hola Dario,

      Is this what you are looking for?
      https://jsfiddle.net/robaum/rco9n50e/2/

      The opacity change is just for some of the animations. SlideIns don’t require this change since they use visibility not opacity.