jQuery Plugin For Creating Element Rotation Animations

File Size: 360 KB
Views Total: 3145
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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

$('.gear_container').on('mouseenter',function() {
//the fastest direction to reach the specified degree
//is automatically detected

$('.gear_container').on('mouseleave',function() {
//once rotation is finished, the last degree reached
//is saved. The next rotation for that element begins

4. Available settings.


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() {
//The element will rotate to -100° and then
//rotate back to 0°

$('#myElement').rotate(300,{speed:200},function() {
//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.