Jquery-path NPM

jQuery.path

Provides animation along bezier and circular arcs.

The animation engine in jQuery is focussed on single dimensional animation - hence it's difficult to animate two variables along a path.

This simple plugin provides a method of multidimensional animation, and in particular provides a method for animating along bezier curves and arcs.

Example: animate along a bezier path

Bezier curves are made form a start point, an end point each with a control point

start is starting point
end is the final point
x,y indicate the coordinates at that point. Required
angle is the angle of the control point from the line joining the start and end. Optional, default is 0
length is the distance from the point to it's control point as a ratio of the distance from start to end. Optional, default is 1/3

Exampe: animate along an arc

center is the coords of the centre of an imaginary circle that contains the start and end point
radius is the radius of this circle
start is the angle of the start point. 0 is "North", measured clockwise
end is the angle of the start point. 0 is "North", measured clockwise
dir is the direction to move in. Only required if not obvious from start and end (e.g. if start is 100, end is 30, but you want to animate clockwise)

It is trivial to create other paths, or even animate other parameters. E.g:

Tested in

7 years ago