Javascript Bezier Curve Animation Library

I wrote a Javascript bezier curve animation library. I can’t seem to find any javascript bezier animation library that can handle multiple degree, so I made one myself. You can download it from the github here: https://github.com/tealtadpole/tt-javascript-bezier-animation

Live example

You  can see the live example here: https://web.tealtadpole.me/tt-javascript-bezier-animation/

You can download the live example html file (or clone it from the github repository), then dissect the content inside. The usage is pretty simple, and I think it should cover most custom animation cases. I use requestAnimationFrame( ) method for a better performance (it will be paused when the tab is inactive (in the background). Beware that you might have your own animation function for your requestAnimationFrame method, if this is the case, you might have to manually modify your animation function.

Usage

1. Import the javascript library
   
2. Prepare the container tag and the child tag. (Container is where the animated DOM id located, it must have at least positioning relative/absolute, normally it should have a width and height. Child tag is the DOM id that will be animated)
   
3. call ttBezier.add( options ) to ‘setup’ the bezier
   
4. call ttBezier.start( name ) to start the animation with the given name
   
5. call ttBezier.stop( name ) to stop the animation with the given name
   

That’s it, super easy. But please note that you need to provide ‘normalized’ control points. The number of points must be at least equal to degree + 1 (for example: bezier degree 3 will need 4 control points, while bezier degree 2 will need 3 control points). The 0,0 origin are the bottom left corner. While 1,1 is the top right corner. You can specify a number less than 0 and 1,meaning your animation might be outside the container box. If you’re not sure about where to put the points, you can use any online bezier drawing tool. Such as this one from desmos.com.

The following options are possible:

option	type	description
name	string	Animation name
containerId	string	Animation container DOM id
childId	string	Animated element DOM id
childOrigin	string (optional, default ‘top-left’)	Center animated element origin
degree	number (optional, default 3)	Bezier degree, starting from 1 (linear line)
points	Array [{x: __ , y: __ }]	Array of points
duration	number (int milliseconds) (optional, default 500)	Animation duration
easing	string (optional)	Easing type
loop	boolean (optional, default true)	Looped animation
hideOnAnimationEnd	boolean (optional, default false)	Hide the child when the animation ends (with display=none)
run	boolean (optional, default false)	Run the animation immediately

Easings

I copy-pasted some easing functions from easings.net. It’s pretty straight forward, where the t is the normalized timestamp from 0 to 1. You can use it by adding an easing param. There are many easing options available, you should check it.

childOrigin

Child origin is when to align your animated DOM id, it has 9 possible values. The default is top-left.

• top-left
• top
• top-right
• left
• center
• right
• bottom-left
• bottom
• bottom-right

-tt-