Add Touch-Friendly Rotation Effects with Propeller jQuery Plugin

Propeller is a lightweight jQuery plugin that enables rotation of elements using mouse drag or touch gestures. It provides a smooth and high-performance rotation experience for any elements & UI components in your web projects.

The plugin supports inertial rotation, which adds a natural feel to the element rotation. Once a user stops dragging, the element continues to rotate for a brief period, simulating the effect of inertia. It also comes with a stepwise rotation feature that allows you to control rotation increments, which ensures precision and consistency when rotating elements.

How to use it:

1. To get started, include the minified version of the Propeller plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/propeller.min.js"></script>

2. Apply Propeller to any HTML element as follows:

<img id="rotatable" src="wheel.png" />
... any element ...

$(function(){ 
  $('#rotatable').propeller({
    // options here
  });
});

3. Set the initial angle of the rotatable element. Default: 0

$(function(){ 
  $('#rotatable').propeller({
    angle: 30,
  });
});

4. Config the inertia feature. 1 means infinite rotation.

$(function(){ 
  $('#rotatable').propeller({
    inertia: 0.98
  });
});

5. Set the speed at which the element rotates.

$(function(){ 
  $('#rotatable').propeller({
    speed: 0,
    minimalSpeed: 0.001,
  });
});

6. Config the stepwise mode.

$(function(){ 
  $('#rotatable').propeller({
    step: 0,
    stepTransitionTime: 0,
    stepTransitionEasing: 'linear', // easing function
  });
});

7. Callback functions.

$(function(){ 
  $('#rotatable').propeller({
    onRotate: function(){
      console.log(this.angle);
    },
    onDragStart: function(){
      // do something
    },
    onDragStop: function(){
      // do something
    },
    onStop: function(){
      // do something
    },
  });
});

8. API method.

instance.bind();
instance.unbind();
instance.stop();

---

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