New plugin: jQuery.crSpline - Animates elements smoothly along arbitrary-length sequences of waypoints in 2D
jQuery.crSpline - Smooth 2D animation along paths of multiple waypoints, using Catmull-Rom splines.
Demo
GitHub
You provide: A series of (x,y) points that the path should follow.
Plugin provides: Animation along a smooth 2D path that intersects all points. Check out the demo page to see what it looks like.
Example usage:
$("#some-element").animate({
crSpline: $.crSpline.buildSequence([[x0, y0], ... [x9, y9]]),
duration: 20000
});
I just published an early release of this and am looking for feedback from other developers! I made it because I needed an easy way to make animations out of extended sequences of coordinates (without doing the math to stitch together bezier curves), and as far as I could tell no one else had published an easy method to animate along Catmull-Rom splines using jQuery. This is the result, and the hope is that it will be super easy to use and helpful for people besides just me.
Future plans: More general animations and customizable behavior. The current version only animates top and left properties along whole pixel values. It also assumes that every segment of the path should take equal time, resulting in some strange speed changes when moving from small to large segments. Currently brainstorming good fixes for all of these.
If you have the time to take a look and play with it a bit, let me know what you think! It's my first plugin, so any tips would be greatly appreciated.
Thanks and enjoy. =)