Question

I would like to know the best way to animate an element in a circular motion around a central point?

I couldn’t quite figure it out… 🙁

Thanks in advance.

Neuroflux.

Answer 1

easiest i can think of is:

1. make the central point position relative
2. make the animated element to be child of above
3. calculate the top, left using:
   math.sin(time * (angle /second)) * distance
   math.cos(….)

simple demo:

var elem = $('h1:eq(0)')
    .append('<span id="round" style="position:absolute;background-color:red;">&nbsp;</span>')
    .css('position','relative')
    .find('span#round');

var i = 0;
setInterval(function(){    
    ++i;  
    elem.css({'left': Math.sin(i * 0.02) * 100, 'top': Math.cos(i * 0.02) * 100});}, 100);

See it in action at jsfiddle.