pro

Propeller

JavaScript library to rotate elements with mouse or touch gestures. Supports inertia and stepwise rotation. Optimized for better performance.

Showing:

Popularity

Downloads/wk

22

GitHub Stars

391

Maintenance

Last Commit

4yrs ago

Contributors

4

Package

Dependencies

0

Size (min+gzip)

2.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Propeller.js

JavaScript library to rotate elements by mouse. Supports inertia and stepwise rotation. It is also compatible with touch devices.

Lot of demos

Spinner game drawn by my doughter

Project page

Propeller.js

Usage

Available on NPM

npm install Propeller

Easy-to-use as jQuery plugin:

$(nodeOrSelector).propeller(options);

or zero-dependancy library

new Propeller(nodeOrSelector, options)

Performance

Propeller uses requestAnimationFrame and GPU compositing for better performance.

Options

  • angle sets initial angle
  • inertia is the most valueble option. It is a number between 0 and 1. 0 means no rotation after mouse was released. 1 means infinite rotation. For this demo we use inertia equals to 0.99.
  • speed - initial speed of rotation. It also can be used as property in runtime.
  • minimalSpeed - minimal speed of rotation. Works only if propeller have inertia between 0 and 1.
  • step allows to set step in degrees for stepwise mode.
  • stepTransitionTime enables CSS transition to move from step to step. This makes steps smooth and allows to use CSS transitions easing.
  • stepTransitionEasing CSS easing mode for transition when in stepwise mode and stepTransitionTime is more than zero. A bit more about easing functions
  • onRotate callback executed when rotated. You can easily get current angle as this.angle inside of callback function.
  • onStop callback executed when stopped.
  • onDragStart callback executed when start dragging.
  • onDragStop callback executed when stop dragging.

Methods

  • unbind unbind listeners to make propeller inactive, this does not stop rotation
  • bind bind listeners after they were unbinded
  • stop stop rotation immidiately

Public properties

  • angle current propellers angle.
  • speed current speed of rotation. Degrees per frame.

License

MIT: http://mit-license.org/

Copyright 2014 Denis Radin aka PixelsCommander

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100