Javascript Bezier animation library

Bezier animation library in Javascript. You can use this library to make any animation within a container with relative/absolute position.

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

Blog article:

https://tealtadpole.me/index.php/2021/11/16/javascript-bezier-animation-library

Usage:

1. Import the library/class
2. javascript ttBezier.add(options); - add the animation into the library with configuration
3. javascript ttBezier.start(name); - start the animation with name
4. javascript ttBezier.stop(name); - stop the animation with name

Options:

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

childOrigin list:

Possible childOrigin as follows:

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

Easing

Taken from: https://easings.net/

• easeInSine
• easeOutSine
• easeInOutSine
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInBack
• easeOutBack
• easeInOutBack
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBounce
• easeOutBounce

Bezier functions:

de Casteljau's algorithm approach

static bezier(degree, points, t) {
    const newPoints = []
    for (let i=0; i < degree; i++) {
        let newPoint = ttBezier.linearFunction(points[i].x, points[i+1].x, points[i].y, points[i+1].y, t)
        newPoints.push(newPoint)
    }
    if (newPoints.length === 1) {
        return newPoints[0]
    } else {
        return ttBezier.bezier(degree - 1, newPoints, t)
    }
}

static linearFunction(x1, x2, y1, y2, t) {
    let x = (1 - t) * x1 + t * x2
    let y = (1 - t) * y1 + t * y2
    return { x, y } 
}

-tt-