Thanks a lot both for the quick replies and explanations. I really appreciate that!

See the working part of what I have made: testsite-vc.verwey-creatives.nl/diensten/… Here you can also see the rotation reverse speed problem when rescaling the browser down.

That looks good. Suggest using Raphaels animateWith to make sure the frames sync up. Although, it's not without error, in fact some people recommend forgoing the built in animation and writing your own to take advantage of the browsers animationFrame for better syncing and redraw.

In my live test site its still the code I got already. I assume that in your code you wrote the rotation of the gears is all the same? In my site the have to rotate like gears interacting eachother.

Yes, based on your reuse of the angle variable I mistook your intention as wanting them to rotate together. Actually, I don't see how you implement direction, so I don't think my changes would affect it...

by the angle and -angle in the code: tandwiel1.stop().animate( { "transform": "R" + angle }, 1000, "<>" ); and e.g. tandwiel2.stop().animate( { "transform": "R" + -angle }, 1000, "<>" );

I also used this code: var paper = new Raphael(document.getElementById('tandwiel-4'), 240, 240); for generating a div that I can position correctly for responsive views

That won't "generate" a div, you are placing the SVG in a div. But you don't need to do that for each element. You can put them all on the same paper and move that as needed. If you need to re-position an element relative to another within the paper you would use the translate feature of Raphael. Let me see if I can whip you up an example.

That would be nice. I'm such a newbie to this stuff it tooks me weeks to figure out only this script. I appreciate the help!

That fiddle looks nice! And it runs smooth with minimal code. Honoust to say I don't understand the code you used for rotating it left and right??

I will add some comments when I have a little free time. But for now, there are two answers that properly address reviewing the code that you presented. If one of them is adequate you should mark it as accepted and move on from this thread. If you have another question you can post another question. If you would like to discuss what changes I made and why, or further refine the code to fit your cogs we can move to the stackexchange chat and discuss it further.

I don't understand the line of code: (i%2===0?'':'-') I found out by try and error that the ' ' and the second '-' is for rotation left and right in order. But how can I control for e.g. the last 2 gears to rotate the same direction?

I have to go to sleep now, it's past 1:00 at night. I guess I am in a total different timezone then you are? Maybe tomorrow you will have some time to chat here?