Rotation of elements not smooth

Question

I am working on an HTML5 game, and it's about rotating a div element constantly and adding elelments to it.

I am noticing that the rotation is not as smooth and regular as it should be, sometimes little jumps can be noticed.

I was using a setInterval with a rotate transformation to create the effect, but it was really bad and unstable. Then I changed the code to use the requestAnimationFrame, which goes much better but still not perfect, and limits the speed control.

I am also using this CSS code to pass the animation processing to the GPU:

transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000;

-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Does somebody know what else can I do to improve the animation? It looks like simple and one time animations are ok with cordova, but when we need to make some element be animated constantly the performance is not really good.

Did you do any in-browser profiling to pinpoint the actual performance bottlenecks in your code? — doldt, May 26 '15 at 09:18

score 1 · Accepted Answer · edited May 23 '17 at 10:29

1

Do you have a look to this another question? CSS3 Spin Animation

Is it the same?

edited May 23 '17 at 10:29

Community

1
1

answered May 26 '15 at 09:23

Raúl Martín

4,471
3
23
42

Gracias Raúl! It was not the same, but I could adapt it to my program. Now it runs smoothly and I can even control the speed that I want to use. – garfield185 May 26 '15 at 17:50
De nada @garfield185 I'm happy to help. – Raúl Martín May 26 '15 at 22:40

score 0 · Answer 2 · answered May 26 '15 at 09:19

0

You can try with other libraries that were optimized for dom animations. I havent actually worked with one so I cant really say if there is significant performance gain but still they sound promising:

I've heard good things about this one: Velocity

answered May 26 '15 at 09:19

astian

684
7
18

score 0 · Answer 3 · answered May 26 '15 at 09:20

My suggestion: use a canvas.

But, to stick with your existing codebase:

You might be able to smooth things up by putting it in a bounding box with enough space so it doesn't have to recalculate the entire page as it rotates(page lenght/width doesn't change upon rotation). Using a canvas and webgl would make a things a lot smoother though.

Also, for any heavy tick extending processing(calculating where things should go, paths to travel, etc...) use a webworker to which you post the objects to(don't post as json args. use single arguments for postMessage to pass as object). That way the rendering thread doesn't have to wait on the computations to keep rotating and can just push paths to travel with the elements when it's done.

Also, save references to your objects. don't repeatedly use document.getElementById. use document.getElementById once and keep the reference and pass it around.

Rotation of elements not smooth

3 Answers3