jQuery Plugin For Creating Element Rotation Animations

Rotation Animation is a cool jQuery plugin used to rotate any element with custom frame-by-frame rotation animations.

How to use it:

1. Include both jQuery library and the jQuery rotation animation plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.RotatAnim.js"></script>

2. Create Html elements you wish to rotate.

<div id="gear_container">
<div id="gear1" class="gear"></div>
<div id="gear2" class="gear"></div>
</div>

3. The Javascript to enable the rotation animations on the gears.

$('.gear_container').on('mouseenter',function() {
   $('#gear1').rotate(360);
   $('#gear2').rotate(360,{speed:90});
});
//the fastest direction to reach the specified degree
//is automatically detected

$('.gear_container').on('mouseleave',function() {
   $('#gear1').rotate(0);
   $('#gear2').rotate(0);
});
//once rotation is finished, the last degree reached
//is saved. The next rotation for that element begins
//there

4. Available settings.

$('#myElement').rotate(ANGLE,{
counter:0,
log:false,
loop:false,
speed:100,
speedOffset:100
});

5. Callback Functions. These functions are executed once the looping animation for an element has been completed. They are passed after specifying a degree or settings.

$('#myElement').rotate(-100,function() {
   $(this).rotate(0);
});
//The element will rotate to -100° and then
//rotate back to 0°

$('#myElement').rotate(300,{speed:200},function() {
   $('#mySecondElement').rotate(100);
});
//The second element will not rotate until the first
//one has finished rotating

---

This awesome jQuery plugin is developed by juanvallejo. For more Advanced Usages, please check the demo page or visit the official website.