shunt

css3 / hardware-accelerated animation api for jquery. trigger animations via events, chain animations together with callbacks to choreograph richer effects.

by Matt Knight

HTML

<script src="https://rawgithub.com/reconstrukt/shunt/master/jquery.shunt.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/reconstrukt/shunt/master/css/demo.css">
<link rel="stylesheet" href="https://rawgit.com/daneden/animate.css/master/animate.css">
<div class="box box-1">
    <p>CLICK TO PLAY</p>
</div>

JavaScript

$(document).ready( function(){
    
    // onclick, 
    // play a 3-step choreographed css3 animation
    
    $('.box-1').click(function() {
      
      // step 1
      $('.box-1').shunt('flipOutY', function() {
      
        // step 2
        $(this).shunt('flipInY', function(){
          
          // step 3
          $(this)
          .text('IMMA FALL DOWN')
          .shunt('hinge', 2000, 1000, function(){

            $(this).text('OUCH THAT HURT');
            alert('all done.');

          });
        });
      });
    });
  });