How to animate an image along a path with Bezier curves
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)
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