How to animate an image along an arc

Question

I want to animate am image along the path of an arc. This arc is a 45o segment of the circumference of a circle.

I understand that previously the easiest way to do this was to use https://github.com/weepy/jquery.path, however this code appears to be defunct (demo no longer works in Chrome).

How would I otherwise approach doing this?

Answer 1

You can use a step callback in the animation to make your own custom effect. Animate some property that doesn't have a visible effect, and set the coordinates from that:

$('div').css({ fontSize: 0 }).animate({
    fontSize: 45
},{
    duration: 2000,
    easing: "swing",
    step: function(t, fx){
        var a = t / 57.296; // from degrees to radians
        var x = 100 + Math.cos(a) * 50;
        var y = 100 + Math.sin(a) * 50;
        $(this).css({ left: x, top: y });
    }
});

Demo: http://jsfiddle.net/Guffa/a9eXE/