Start off by downloading and inserting the wickedCSS file in your project. Then simply link the script in your header:

<link rel="stylesheet" href="css/wickedcss.min.css">

Or the non-minified version

<link rel="stylesheet" href="css/wickedcss.css">

Remember to substitute the css directory with your css directory!

Simply add the animation class to your element and it will perform your wicked animation.

<div class="barrelRoll"> Place your content here </div>

This could also be any image.

<img src="images/mushroom.png" class="spinner"/>

That's it. You should now see your animations on your page! You can continue to read for further customizations.

It's time to look at performing the animation while scrolling. The easiest way is to integrate the library with wow.js.

<div class="wow barrelRoll"> Content to Reveal Here </div>

Alternatively, you can use jQuery to specify when the animation should trigger. Note that this option requires jQuery in your project. The animation will trigger when the animated element is 450 pixels from the top of the screen. To change this, simply change the 450 number to whatever you like.

<script>
$(window).scroll(function() {
  $('#animatedElement').each(function(){
   var imagePos = $(this).offset().top;
   var topOfWindow = $(window).scrollTop();
   if (imagePos < topOfWindow+450) {
   $(this).addClass("barrelRoll");
   }
  });
});
</script>

The animations can also be triggered by a button like the ones on the project page. You can do this with a simple jQuery snippet.

<script>
   $('#animatedElement').click(function() { $(this).addClass("barrelRoll"); });
</script>

The library is not a very heavy one. However, if you want to make it smaller, you can use a task runner to remove the css you don't use. If you are using grunt, uncss can do this for you.

Alternatively, open the non-minified css version and simple grab the classes you want to use in your project.