pixelscommander/propeller

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

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

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

propeller's Issues

onStop event firing 2 times.

Hey, do you know why this is happening?
Thanks in advance.
Damian

new Propeller(document.getElementById("ruleta"), 
{
    inertia: 0.90, 
    onStop: function(){
        var angle = this.angle;
        var scope = angular.element($("#main")).scope();
        scope.$apply(function(){
            console.log(angle);
        })
    }
});

Doesn't work on chrome browser

Hello,
i determine in my test with the propeller.js lib that it doesn't work on my chrome browser (Version 57.0.2987.110) under windows. On your example page (http://pixelscommander.com/polygon/propeller/example/jquerygrid.html) the behavior is the same, i can not grab and move the propeller.

in table - side by side example

I am trying to do this: http://fpa-voices.com/wheel3/example/leo.html
the problem is that the wheel on the right behaves differently...

Does not work in Firefox 27

It does not work in Firefox 27. Does it use any specific JavaScript/HTML5 stuff that is not implemented in Firefox?

Initial angle doesn't work

I went through the code and noticed that there is an angle option for the option object but the angle always resets to 0 no matter what is set in the option object. Is there an easy work around or something that could be fixed?

onStart, onStop callbacks

onStart, onStop callbacks should be implemented

Manually rotate

Hello,
is there a possibility to manually rotate the propeller?
So for example I have two buttons, one negative and one positive which twist counterclockwise or clockwise.

Minimum speed property

Minimum speed property should be implemented

Properller inside iframe not working

If the propeller containing page is called inside iframe, it does not work. Is there any way to solve this?

onRotate reports 320+ degrees as negative number until rises to 0 degrees

As the title says, once the reported angle reaches the 300's it suddenly jumps all the way back down to around -60. It then rises until it has fully rotated and reached 0.

You can see the behaviour here: http://www.marvel-timeline.com/spin.html

The code is all viewable by accessing the source of the page. Is there a setting I am missing or a style?

Update npm package

Not sure if this deserves a new issue, but to make sure that it gets proper attention.

PR #27 got merged, but can you update the npm package as well?

es6 import returns empty object

the import of Propeller returns an empty object instead of a constructor function.

import Propeller from "Propeller/src/propeller"

luckily i can workaround it by directly accessing "window.Propeller" after the import statement, but it would be better to export the correct constructor function.

i use es6 import through webpack/babel.

Way to adjust the angle from "outside"

Hi, is there a way to adjust the angle of a Propeller element via Javascript?

Rotation bug if target element or parent as position:fixed.

If the element or his parent is in position: fixed, the rotation doesn't work fine when you scroll.
For fix, you have to use clientX and clientY here instead of pageX and pageY:

p.onRotated = function (event) {
    if (this.active === true) {
        event.stopPropagation();
        event.preventDefault();

        if (event.touches !== undefined && event.touches[0] !== undefined) {

            this.lastMouseEvent = {
                pageX: event.touches[0].clientX,
                pageY: event.touches[0].clientY
            }
        } else {
            this.lastMouseEvent = {
                pageX: event.clientX,
                pageY: event.clientY
            }
        }
    }
}

rotate element with lower z-index

I have a few elements stacked on top of each other. I would like to be able to apply propeller.js to one of the divs in the middle of the stack, and rotate that.

In other words, is if possible for the mouse/touch inputs to be applied to a div other than the one on the top layer?

Count number of swipe

An option to stop drag event propagation

While dragging a propeller element, if the mouse moves over another propeller element which is a parent, the second element will start rotating. This can be confusing and frustrating. Adding event.stopPropagation(); to the end of p.onRotationStart() stops this for me (example at http://hagabaka.github.io/clock-puzzle/). I think this should be the default, or an option should be provided for this behavior.

Turn Count

Is is possible to get how many times it turned?

Thank you

Support for Vue?

Any chance for support for Vue?

Something like:

if (Window.Vue) {
    export {Propeller};
}

I'm doing this right now, so I can use propeller in a component for Vue.

Thanks

only rotate when click on a button

Doesn't work on an svg element

Ok, so I have an svg image inline in my html and an element in that svg I want to be able to drag and rotate. I have an id on the <g> element I want to rotate and I have set up the js. If I use a speed of 1, the element rotates correctly and looks good. I can set inertia and everything. The problem occurs when I try and drag the element to rotate it manually. It simply stops and I can't drag it anywhere.
Is this a bug that could be fixed or should I separate the element from the svg into it's own svg that I can rotate?
Thanks

use in android app

i want to use your code in one of my android app.can i use it or if i want to sell my android app
can i sell it.

OnDragStop fires several times when I launch the propeller

Angle range

Hi!
Is possible to limit rotation to range of angles (eg from 270 to 90 top half circle)?
if yes, how?
Thank's!!!

Propeller on touch screen windows doesn't work

Hello I used this script on my web site but it doesn't work on touch screen on my computer.
I tried to change on tablet mode, tried egde, chrome, firefox, tried to change settings on them, but no way.
I thing my finger doesn't send the real code ontouchstart.

do you have an issue please?

Control from another div

Is it possible to control the propellor from another div? I have a div called pano and when the mouse dras on that div I want my other div named ng to rotate instead of the pano div. Is this possible?

how to rotate by javascript?

1. rotate by js
   2.when init, i use
   new Propeller(document.getElementById('r'), {
   angle: 45,
   ...
   i want to rotate by animation, and onRoate event can fired.

what is the syntax for accessing the methods?

sorry if this is obvious, but once I have initiated Propeller on a div, what is the way to access the stop method?

i want to rotate a element on button click

i have set this property
var pr = new Propeller(document.getElementById('pro'), { inertia: .996, speed:0 });
now i want to rotate this elemnt only on button click
currently this is also work when i swipe the object.
but i want only do this this when click on button with same property

Is it possible to restrict the rotation between degrees?

Hello,
Excellent work here!

Is there a way to restrict the rotation of a propeller between, say, 300° and 45°? If there is inertia, will it bounce off of the boundary?

Wrong drag point when parent element is translated

If the parent element has a translate3d position defined (for example than (100, 100, 0)), the interaction coordinates are still calculated as if the parent element is at (0, 0, 0).

In the examples page, if I apply the following CSS to one of the DIVs with the class "example" (which are parent to Propeller instances, the drag point is still calculated from the original TOP / LEFT as if the parent isn't translated.

<td class="example" style="
    position: absolute;
    transform: translate3d(100px, 100px, 1px);
    width: 397px;
    height: 402px;

In my case I need to have a translate3d position defined in the parent element and still be able to rotate the Propeller instance inside it. But the translate3d applied to the parent doesn't seem to be taken into consideration in the calculations. Any thoughts?

Drop support for IE8

First of all - great plugin!

Title says it all - drop support for ancient unsupported browsers. Just by removing the polyfills at the end of the source we get:

• Trimming the source code to 490 LOC which is -20% from the original
• Approx. 2KB smaller file size in production minified non-gzipped version. From 11.2KB to 9.32KB which is almost 2KB less (17% file size reduction)

Can I use... Function#bind and set/get
Can I use... window.addEventListener
Can I use... window.getComputedStyle

I can help with a PR.

Mouse drag not working?

Hiya,

So I can't seem to be able to initiate the rotation with a mouse drag, not even on your website :( The rotation happens nicely on a touch-drag, but not mouse. Any pointers as to why this may be?

Rachel