How to animate an image along a path with Bezier curves

Question

My goal:

• Move/animate an image along a path like the drawing below (Could be connecting bezier curves).
• Must work in IE7+, don\'t what to

Answer 1

I would recommend you to use GSAP : http://www.greensock.com/get-started-js/

With that you can handle timelines, and here is a bezier plugin : http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

regards

Answer 2

There's a tiny script (SVG based), just for animation which isn't in straight lines,
called pathAnimator (2kb), It's very very small and very efficient.
No jQuery required.

For example:

var path = "M150 0 L75 200 L225 200 Z";         // an SVG path
    pathAnimator = new PathAnimator( path ),    // initiate a new pathAnimator object
    speed = 6,              // seconds that will take going through the whole path
    reverse = false,        // go back or forward along the path
    startOffset = 0,        // between 0% to 100%
    easing = function(t){ t*(2-t) };    // optional easing function


pathAnimator.start( speed, step, reverse, startOffset, finish, easing);

function step( point, angle ){
    // do something every "frame" with: point.x, point.y & angle
}

function finish(){
    // do something when animation is done
}

---

(can even get more efficient using fastdom)