Bruno Bruno - 9 months ago 50
Javascript Question

How to animate an image along a path with Bezier curves

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 build multiple solutions.

  • I can pause/resume the moving image.

  • The image will keep moving along the path (repeat).

the path

What I have considered

  • CANVAS: not supported in IE7+8, haven't tested explorercanvas yet! Foresee some z-index issues.

  • SVG, not supported in IE7+8.

  • jQuery.path, a plugin that extends the jQuery animate function. Can't figure out the resume part and I want to use CSS transforms when supported.

My plan

  • Animate the image with CSS 3D transform, CSS 2d transform or jQuery.animate (what supported) and requestAnimationFrame.

  • Calculate all the coordinates and simple move the image pixel by pixel.

My question

  • Does my plan sound like madness? Better suggestions?

  • Do you foresee some performance issues? I might end up with 5K or 10K coordinates.

  • Do you know a smart way, a program, a function or anything similar to calculate all the coordinates?

Answer Source

I would recommend you to use GSAP :

With that you can handle timelines, and here is a bezier plugin :