Resources

Animo jQuery CSS Animation Plugin

animo

CSS animation hold a great performance advantage over Javascript animation. But the problem with CSS animation is that they are either ran on page load or hover events. This is where using Javascript to create your CSS animations can be really helpful, it will allow you to add animation at any point you want, or stack a number of animations, or trigger a new animation on any page event.

This is where the Animo.js library can help with your CSS animations, this library uses the CSS animation library of animate.css. This CSS animation library holds over 60 CSS animations which is an open source project so you can use on any of your websites.

To use Animo.js you can download/fork from Github. Fork Animo.js

Animo.js is a jQuery plugin so you will need to have jQuery loaded on your page to use it correctly.

<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="animo.js" type="text/javascript"></script>
<link href="animate+animo.css" rel="stylesheet" type="text/css">

Animo JS

Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial