Mtn. Dog Media

Learning Animations with jQuery and Animate.css

As we constantly up our game here at Mtn Dog, when our designer asked for some animated graphics on one of our latest projects, I assured her I would be able to figure it out, even though I had never done animations before. I ended up having so much fun with it I threw in a bonus animation (that’s does more than just look pretty) for our client.

Animations in CSS

Animations on the web used to be handled with JavaScript, Java, Flash, or other scripting languages. But that was both difficult–because you had to learn how to write code–and clunky–it required an entirely new element besides HTML and CSS.

Now, however, animations are largely handled by CSS. The same layer that handles the colors and layouts of the website can be used to move all that stuff around dynamically.

Luckily, just before starting this new project, I had happened to take a class that introduced me to CSS animations (thank you universe). The class showed me how to use Animate.css, a simple set of CSS animations packaged for anyone to use very easily. You just install the file, and then you can assign the animated CSS class and a specific animation to whatever you want. Here’s what I made:

See the Pen Factory Hearts Animation by Khaled Allen (@khaledallen) on CodePen.

Using animate.css, all I had to do was add class=“animated fadeOutUp” to the <div> that contained the images I wanted to animate. Animate.css already had the instructions for what that would look like.

In order to control the speed and duration of the animation, I added some of my own CSS

#hearts-small {
  margin-bottom: -30%;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  -moz-animation-duration: 4s;
  -moz-animation-delay: 0s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-duration: 4s;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
}

One annoying thing about animations is that you need to include all those prefixes to make sure older browsers don’t freak out.

Making it Work in WordPress

Since all of Mtn Dog’s sites are built on WordPress, actually making that nifty animation happen wasn’t as simple as just “installing” animate.css. WordPress is really picky about how and where it gets new scripts and files and incorporates them into the process of building a web page for the user to see.

In order to get WordPress to look at a new file, it needs to be enqueued, which means that you have to tell WordPress to actually load the file you want and where to put it. You can’t just do it yourself.

Having already done this with loading child theme files, I just had to make sure the code was the same for a custom CSS file. Turns out it is.

First, I had to upload the file animate.css to the server. Then, this goes in the functions.php file:

//Adds the animate.css stylesheet to WP
function stc_animate_css () {
    wp_register_style('animate-css', get_stylesheet_directory_uri() . '/animate.min.css', array(), '20120725', 'screen' );
wp_enqueue_style('animate-css');
}
add_action ('wp_enqueue_scripts', 'stc_animate_css');

All that does is tell WordPress to add animate.css to the files it looks at when it is building a site, so that when I call class=“animated fadeOutUp", it knows what that means.

Since the factory animation was just going to run all day, it didn’t need any triggers.

But the next project did, which meant I needed to use real code (GASP).

jQuery to Interact with the User

jQuery is a Javascript framework designed to be really easy to use, since it comes with a bunch of predesigned functions and plays nice with CSS. It is the preferred method for user-triggered animations, which is what I decided to build next.

Our design called for a mobile menu that dropped in from the top, instead of sliding in from the side as Canvas usually does. So, I decided to build my own.

Since I needed more control on how far the animation moved, I needed to write my own instead of using animate.css.

Here’s what the end result was (it looks a little off here, out of context of the site, but you can see the idea).

See the Pen A Simple Dropdown Menu by Khaled Allen (@khaledallen) on CodePen.

All it does is slide down when you click the “Menu” button and slide back up when you click the “X”. When it’s up, it is offscreen.

To make my own custom animation in CSS, I had to learn about the @keyframes attribute, which is how you define an animation loop. When you activate the animation, the browser looks at the related @keyframes, runs through them, and that’s what makes the shape animate.

Here are the @keyframes for the menu:

@keyframes stcSlideIn {
  from {top: -370px;}
  to {top: 0px;}
}

@keyframes stcSlideOut {
  from {top: 0px;}
  to {top: -370px;}
}

In this case, all it does is that it moves the top property up or down.

Once you define the @keyframes, you just associate them with a CSS class:

.mobile-menu-slideOut {
  animation-name: stcSlideOut;
  animation-duration: 1s;
}

So, any element with the .mobile-menu-slideOut class will execute the animation connected to it, which in this case is stcSlideOut.

So where does jQuery come in?

Normally, a CSS animation will just start once the page loads, but in this case, we don’t want the menu to start sliding up and down until the user clicks it. CSS doesn’t have more than a very basic ability to detect user interaction, so we need do use jQuery.

jQuery(document).ready(function($) {
  $('#stc-top-bar').click(
    function() {
      $('#stc-top-mobile-menu-container').removeClass('mobile-menu-slideOut').addClass('mobile-menu-slideIn').css('top', '0px');
    });

  $('#stc-mobile-close-button').click(function() {
    $('#stc-top-mobile-menu-container').removeClass('mobile-menu-slideIn').addClass('mobile-menu-slideOut').css('top', '-370px');
  });
});

What this does is tell the browser to add or remove the CSS classes that have the animations attached to them to the menu's body (#stc-top-mobile-menu-container in this case) when the user clicks either the “Menu” (#stc-top-bar) or the “X” (#stc-mobile-close-button). It also resets the top attribute to match what it is at the endpoint of the animation, otherwise the menu would reset to its starting position after the animation completed, defeating the purpose.

Enqueueing the Script

Since the jQuery script is in a separate file, it also needed to be enqueued to work in WordPress. I could have just written it directly into the theme, but that’s bad practice.

Animations

Animations can get distracting, but used tastefully, they add a lot to the user experience, allowing you the sense that you are interacting with the page in a meaningful, living way. We're looking forward to adding subtle animations to our future projects.

, , ,