Rotation Animation

Rotation Animation v {RotatAnim.getVersionNumber}

A jQuery plugin that animates the rotation of elements by adding the .rotate( ) method. Hover over the gears above to see a demo. The syntax for this demo is shown below.

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

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

View more demos

Demos

Rotate small gear to 200°, big gear to -100°

				//click the button above to start the demo

				$('#small_gear').rotate(200,function() {
				  $('#big_gear').rotate(-100);
				});

Rotate small gear to 50° and big gear to 300°

				$('#small_gear').rotate(50);
				$('#big_gear').rotate(300);

Documentation

Basics Syntax

RotationAnimation integrates seamlesssly with jQuery. Its syntax is simple and quick to use.

				//Rotating any element with Rotation Animation

				$('#myElement').rotate(45);

Basics Setup

To use Rotation Animation, place JavaScript script tags inside your header tags. Using the plugin is as simple as calling its jQuery function and giving it an integer.

				<script>
				  $(document).ready(function() {
				    $('#myElement').rotate(90); //rotates elem to 90°
				  });
				</script>

Basics Speed

RotationAnimation uses frame-by-frame animation. By default, the rotation speed is set to increment 1° per frame.

				$('#myElement').rotate(90,{speed:100});
				//100 is the default speed value

				//The above element will rotate at the average speed
				//until it reaches 90°

Looping

Loops are set to false by default. Looping will rotate an element in the direction closest to 0° indefinitely.

				$('#myElement').rotate('loop');
				//The above code will rotate the element indefinintely

				$('#myElement').rotate(-30,{loop:true});
				//The above code will loop the element to the left

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

Functionality Features

While RotationAnimation provides an extremely simple syntax, it comes with many useful background features.

  • The fastest way to reach the specified degree is automatically calculated. This means the plugin will rotate an element left or right as it deems necessary.
  • The plugin features continuous animation. This means that you can call the .rotate( ) method more than once on the same element, and it will pick up where it left off for subsequent animations.
  • RotationAnimation features frame-by-frame animation, providing consistent animation. This allows for constant animation "speeds" accross different platforms.
  • Callback functions are handled individually per instance. Looping is managed on an element-by-element basis, preventing a looping element from affecting any other.

Update

Rotation Animation v {RotatAnim.getVersionNumber}

Click to update to the latest version of Rotation Animation using CodeCanyon. Thank you for your purchase!

Change log

    {RotatAnim.parseVersionChangelog}

Contact

Submit