— Pixels Commander

[ In English, На русском ]

Rotate HTML elements with mouse

Rotation is an everyday magic. It is an effect which can transform boring web page to a much more interactive place. Since rotation was added to CSS specification it have been deprived of attention. However a lot of cases need to rotate elements with mouse or touch. They are: roulettes, circular menus and other fancy things we still can not imagine at the moment. Propeller.js is a JavaScript library which easily enables rotation of elements with mouse or touch gestures.

Rotate elements by mouse or touch

Usage

Easy-to-use as jQuery plugin:

$(nodeOrSelector).propeller(options);

or zero-dependancy library

new Propeller(nodeOrSelector, options);

Options

  • 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 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 when inertia is 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.
  • onDragStart callback executed when drag starts.
  • onDragStop callback executed when drag stops.
  • onStop callback executed when rotation stops. Works only when inertia is between 0 and 1.

Public properties

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

Performance

Propeller uses requestAnimationFrame and GPU compositing for better performance.

Propeller.js on GitHub


Do not hesitate to contact me in case you have any questions or propositions. Feedback is highly appreciated.

  • Sonu Sindhu

    Fine nice unbelievable super 🙂 (y)

  • http://www.techrecite.com/rotate-image-photo-or-object-around-its-axis-using-javascript-animation/ Rotate image photo picture object around its axis JavaScript animationProgramming tutorials and demos

    […] animation of an image or object which can rotate around its axis. More demos can be found on its developer’s page. Download animation javascripttweet!function(d,s,id){var […]

  • http://jquer.in/css3-jquery-plugins/propeller/ Propeller | javascript plugin to rotate html elements

    […] Home Example rotate html elements […]

  • Greg

    Very very nice!!!Excellent Job! Only one question: how can i add an event lesteren so as to get angle when rotation stops?

  • Anonymous

    Hi. Thanks! Check recent version on GitHub. There is onStop callback added it executes when rotation stops.

  • Maheedhar

    very nice…awesome. But there is a conflict to use jquery draggable, resizable options. It could be even better, if u can provide hot spots for clicking & rotating object.

  • LB Deyo

    Great job on this! Question: Is there a way to set rotation? Or at least set a minimum and maximum rotation?

  • Anonymous

    There is “minimalSpeed” option to set minimum speed and “speed” option to set initial speed of rotation. Maximum rotation speed is limited only by how fast is your user =)

  • LB Deyo

    I’m trying to make sure the user doesn’t rotate the object more than once, front or back. So I want to keep the object’s rotation between -360 and 360. Is that possible?

  • Anonymous

    Could you drop me a message to skype lp_funky in order to clarify your needs? Sure, we can figure out correct solution.

  • alexis

    Woaw thanks for sharing this. Why does OnDragStop fires several times when I launch the propeller ?

  • Anonymous

    Seems it is a bug. I rised an issue at GitHub https://github.com/PixelsCommander/Propeller/issues/4 will take a look soon.

  • Anonymous

    I am not able to reproduce this. Could you drop me a link or fiddle with your project?

  • Aaron Lee

    This is awesome! But a question though, what’s the browser support like

  • Anonymous

    It is IE9+, FF, Chrome, Safari, Android 2.2+, Safari Mobile. So there is support for all modern browsers.

  • Aaron Lee

    awesome. whats the fallback like in IE8 (*shivers*) and below?

  • Anonymous

    I tried to add IE8 fallback using filters but it is very slow and image quality is also degrading. Microsoft dropped XP support few weeks ago so IE8 seems to be a history.

  • SL Udwig

    Is there an option like ‘handle’ planned?
    It will be nice to have an external HTML-element to controll rotation an not a whole element; because this confilcts with Drag’nDrop and other.

  • Anonymous
  • SL Udwig

    Just another feature request: an option to locate center? Can be usefull, but center of rotating elemnt ist okay.

  • Daniel Haro

    Hi, would be great if the rotation of an object could be stopped or activated by an external object, or with another events like click or over. Thanks in advance !

  • Anonymous

    Is it ok for you to have .stop() method on propeller object?

  • Daniel Haro

    Yep, a stop() method would be helpful. However, To have both play () and stop () methods would be glorious. I’m having conflicts trying to combine propeller with other functions to make an element rotate, this one in paritcular:

    http://jsbin.com/ofagog/2/edit

    I really appreciate your attention, and I think you’re doing a great job with propeler.js, Greetings!

  • Anonymous

    Try out new version from GitHub

  • Simon Lopez

    hello I want to know is if propeller.js has some method to destroy the movement, also the jquery ui draggable function has the destroy

  • Anonymous

    Hi and sorry for being late.

    There is nothing like this at the moment. Do you need this feature?

  • ivicajimi

    HI,
    great plugin, but I believe that destroy method is necessary. I would be very thankful if you can help me achieve this.

  • Anonymous

    Hi, try out bind / unbind methods from last version

  • Anonymous

    Try bind / unbind in most recent version

  • ME

    HI, first of all… great plugin!
    I was wondering if it is possible to trigger the function for two elements at the same time when you drag only one element.
    So what I would like to have is to drag one element and animate two elements simultaneous.

    Does your plugin support this?
    Thanks!

  • Anonymous

    Hi, thanks! Glad you like it.

    To rotate two propellers in sync you may set angle property of propeller2 inside of onRotate callback of propeller1.

    onRotate: function(){
    propeller2.angle = this.angle;
    }

  • ME

    Hi,
    thank you so much for your quick response.
    I have tried your solution but it doesn’t seem to work.
    The one I’m dragging is is working as it should.

  • Anonymous

    Actually it should works and it works. Check it out here http://pixelscommander.com/polygon/twopropellers/ and try to get difference between this page and one you made.

  • ME

    Hi there, it’s ME again.
    A while ago I started working with you plugin which is great. Now, 2 months later I have been asked to make some additional features. What I like to have is to set the angle back to 0 after spinning the 360 degrees.

    Could you tell how to do this?

    Thanks!

  • Anonymous

    Have you tried to set angle to 0?

    var propeller = new Propeller(…)
    propeller.angle = 0;

  • http://www.cellsignal.com/ ME

    Thanks for the suggestion.
    I have already tried setting it to 0 when the angle matches a certain value.
    This works fine except for one downside. The propellor visually spins back to 0.

  • Anonymous

    But this is exactly what should happen. If you need some kind of virtual angle with displacement – create your own variable and update it inside of onRotate in any way you would like to.

  • http://www.cellsignal.com/ ME

    Hi, sorry for the late response.
    Thanks for your feedback. I guess I had the wrong expectations but your explanations makes sense.

    I have another question though… Have you found a solution for crossbrowser support yet? It’s to bad the propeller doesn’t work in firefox.

  • Anonymous

    Propeller.js is compatible with all modern browsers including Firefox, Internet Explorer 9, iOS and Android. Check a console for errors. Apparently it is a problem in your code.

  • http://www.cellsignal.com/ ME

    Hi, thanks for your quick reply. I’m afraid I have to disagree with you because I tested your page in firefox and that doesn’t work either. I am using version 10.0.3

  • Anonymous

    My current version is 32.0.3 seems that your one is few years behind it. Just update FF.

  • http://www.cellsignal.com/ ME

    OK so I just found out that IT needs to perform a serious update. We are using Firefox ESR. I just starting working in my current company so I didn’t look at my FF version before. I have put in a request for an update.
    Sorry about this. I found it hard to believe that someone would develop such a plugin that would not be crossbrowser compatible. I look forward to my updated browser version 🙂

    Thanks again!

  • David

    How about a disable and enable to stop and start rotation?

  • Anonymous

    Recent version have bind / unbind methods. Check them out.

  • http://www.NickSaulino.com Nick Saulino

    Thank you so much for this. I was just wondering if there was some way of adding a count to get a running number of spins.

  • Anonymous

    Hi, it is very easy to implement. Check angle onRotate and if it is moved between 360 and 0 – add one, if it moved from 0 to 360 – divide one

  • Keith

    This is awesome, thank you so much! Is there any way that the speed can be updated dynamically?

  • Anonymous

    Have you tried to change .speed property?

  • hahamy

    element has a inital speed, When drag, rotate element, drag end, element remain rotate with the inital speed.
    mycode
    jQuery(“.earth-container”).propeller({inertia: 0.8, speed: 2, onDragStop : function(){
    this.speed = 1;
    }});
    but, It doesn’t work as I wished

  • hahamy

    It works now, code below
    jQuery(“.earth-container”).propeller({
    inertia: 1,
    speed:0.1,
    onDragStart:function(){
    },
    onDragStop:function(){
    var rp = this;
    setTimeout(function(){
    rp.inertia = 1;
    rp.speed = 0.1;
    }, 2000);
    }
    });

  • Stanislav Dzhus

    hi, I created round menu, based on your library.
    every button has a “href” attribute. when I click a menu button, I go to another page. but when I go back to page with my round menu and click any menu button, nothing happens. seems like click events are blocked after first click on button
    how do you think, the problem is caused by Propeller?
    thank you in advance!

  • Anonymous

    Please, share the code, have to look at what is happening there.

  • Stanislav Dzhus

    I found that the problem isn’t caused by Propeller, sorry

  • Anonymous

    Plugin is just cool but when i apply propellor to a div and unbind it and then add draggable to the same div then the draggabble doesnt work

  • Anonymous

    Could you create issue on GitHub?

  • Anonymous
  • tech 407

    Great plugin, I have a requirement to set maximum rotation angle should be 125deg only. after this angle I don’t want to rotate the element. Is there any Option to set maximum angle.

  • Anonymous

    I assume you can set this,angle onRotate based on if this.speed is – or +

  • Faran Tariq

    I want to rotate three objects not in sync but on different events. Like when I click on one object It starts rotating. When I click on second object, first object became stationary if moving and second object will start to move. I can only manage to rotate one object out of three. Can you please help me?

  • admin

    Sounds as a generic JS task. You should just enable / disable a propeller when need any of these

  • Anonymous

    Hi
    First of all thanks for this awesome work.
    I’ve got a question, there is a way to spin back (with inertia / animation) onDragStop ?
    I didn’t find any way to do that…
    thx in advance

  • admin

    Not sure what scenario is. Most likely you ll need a modification.

  • Maycon Silva

    How I can change the center of rotation?

  • Maycon Silva

    How can I perform a function when the spin is in certain degree?

  • admin

    Use onRotate callback and read angle from arguments

  • Ruben

    Great work!
    one question, can i make the rotation in counter-clock wise direction?

  • admin

    Yes, why not?

  • Eugene Zoleta

    Hi, I created a simple html editor and I am using it to rotate texts, images and it works. There is no problem when viewing the generated html, i still see the rotation of the text and images, however, when I load it back to the editor, all the rotations are gone (seems like back to zero). It seems that the rotation is always being reset every time i call this : $(‘.rotate’).propeller({inertia: 0, speed: 0});

    I hope there is a way to preserve (do not change) the rotation of an html element every time propeller is being initialized.

  • http://www.Elk101.com Corey Jacobsen
  • Anonymous

    I think you can save angle to some attribute and then restore it from there. https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
    https://api.jquery.com/data/

    You ll be able to set angle when loading with $(node).propeller({angle: $(node).data(‘angle’)})

  • Kelvin Mgbemele

    can i make the parent div along alongside when rotating the main div?