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
- Import the javascript library
- 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)
- call ttBezier.add( options ) to ‘setup’ the bezier
- call ttBezier.start( name ) to start the animation with the given name
- 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-
Comments are closed.