— Pixels Commander

Fine nice unbelievable super 🙂 (y)

[…] 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 […]

[…] Home Example rotate html elements […]

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

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

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.

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

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 =)

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?

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

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

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

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

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

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

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

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.

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.

Try something like this http://pixelscommander.com/polygon/twopropellers/

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

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 !

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

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!

Try out new version from GitHub

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

Hi and sorry for being late.

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

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

Hi, try out bind / unbind methods from last version

Try bind / unbind in most recent version

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!

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;
}

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.

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.

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!

Have you tried to set angle to 0?

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

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.

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.

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.

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.

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

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

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!

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

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

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.

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

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

Have you tried to change .speed property?

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

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);
}
});

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!

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

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

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

Could you create issue on GitHub?

latest Code — https://jsfiddle.net/0d8rxd73/4/

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.

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

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?

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

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

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

How I can change the center of rotation?

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

Use onRotate callback and read angle from arguments

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

Yes, why not?

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.

nvdwT.Google.Se

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’)})

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