Bezier animation demo

    {
        name: 'animation1',
        containerId: 'animation1container',
        childId: 'circle1',
        childOrigin: 'center',
        degree: 3,
        points: [{
            x: 0,
            y: 0
        }, {
            x: 1,
            y: 0
        }, {
            x: 1,
            y: 1
        }, {
            x: 0,
            y: 1
        }],
        loop: false,
        duration: 1000
    }
                    

    {
        name: 'animation2',
        containerId: 'animation2container',
        childId: 'circle2',
        childOrigin: 'center',
        degree: 3,
        points: [{
            x: 0.5,
            y: 0
        }, {
            x: 0,
            y: 1
        }, {
            x: 1,
            y: 1
        }, {
            x: 0.5,
            y: 0
        }],
        loop: true,
        duration: 2000
    }
        

    {
        name: 'animation3',
        containerId: 'animation3container',
        childId: 'circle3',
        childOrigin: 'center',
        degree: 3,
        points: [{
            x: -1,
            y: 0.75
        }, {
            x: 4,
            y: 0.5
        }, {
            x: -3,
            y: 0.25
        }, {
            x: 2,
            y: 0.25
        }],
        loop: true,
        run: true,
        duration: 1000
    }

    {
        name: 'animation4',
        containerId: 'animation4container',
        childId: 'circle4',
        childOrigin: 'center',
        degree: 2,
        points: [{
            x: 0.5,
            y: 0.5
        }, {
            x: 0.5,
            y: 1.5
        }, {
            x: 0.5,
            y: 0
        }],
        loop: false,
        run: false,
        duration: 500,
        hideOnAnimationEnd: true
    }

    {
        name: 'animation5',
        containerId: 'animation5container',
        childId: 'circle5',
        childOrigin: 'bottom',
        degree: 1,
        points: [{
            x: 0.5,
            y: 1
        }, {
            x: 0.5,
            y: 0
        }],
        loop: true,
        easing: 'easeOutBounce',
        run: true,
        duration: 1000,
        hideOnAnimationEnd: false
    }
                    

    {
        name: 'animation6',
        containerId: 'animation6container',
        childId: 'circle6',
        childOrigin: 'right',
        degree: 1,
        points: [{
            x: 0,
            y: 0.5
        }, {
            x: 1,
            y: 0.5
        }],
        loop: true,
        easing: 'easeInOutCubic',
        run: true,
        duration: 1000,
        hideOnAnimationEnd: true
    }
                    

Github repository:

• https://github.com/tealtadpole/tt-javascript-bezier-animation

Live example:

• https://web.tealtadpole.me/tt-javascript-bezier-animation/

Original blog article:

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

Usage:

1. import the 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. ttBezier.add(options) - add the animation into the library with the configuration
4. ttBezier.start(name) to start the animation
5. ttBezier.stop(name) - to stop the animation

Options

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, defaut 3)	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 list

I use the easing functions from easings.net, the list as follows:

• 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

Notes

• Make sure to set the position's attribute of the container element as relative or absolute to make it work
• This library can draw any number of bezier degree, not limited only to cubic bezier

Bezier Functions

Here are my bezier functions (I used de Casteljau's algorithm)

    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 } 
    }