SOLVED -

I am trying to animate an image to rotate following the angle of a sine wave - the sine wave is created using the jQuery.path plugin.

The problem is with getting a smooth rotation.

I am currently using the jQuery rotate plugin for the rotation, which - as it currently stands - is not creating a smooth rotation.

See http://hellosmithers.com/GNU/STALLMANQUEST.html for JavaScript and jQuery.

The script is relatively heavily commented.

Currently the rotation just repeats and takes a certain amount of time to complete - this means it will not work for all screen sizes as the sine wave takes longer to complete the wider the screen.

function mRot() { // image rotation - it goes from rA[0] (-8 degrees) to rA[1] (8 degrees) then swaps the values // flip the values in rA - making the rotation oposite each iteration of this funciton rA[1] = [rA[0], rA[0] = rA[1]][0]; $("#rmat").rotate({ duration: 1700, angle: rA[0], animateTo: rA[1], callback: mRot }); // I would like to remove this function - instead tying the rotation into the sine wave function somehow }

The sine wave is created as follows:

SineWave = function() { // create the sine wave - as per https://github.com/weepy/jquery.path this.css = function(p) { s = Math.sin(p * 12); x = winWidth - p * (winWidth + 250); y = s * 40 + (winHeight - 440); return {top: y + "px", left: x + "px"}; } }

Thanks