Bezier animation demo

bezier degree 3 with 1 second duration

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

bezier degree 3 with 2 seconds duration forming a circle (looped)

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

autostart, bezier degree 3 with points outside 'normalized' square

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

bezier degree 2 with spinning coin image, img source

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

With easing examples

easeOutBounce easing

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

easeInOutCubic easing

    {
        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:

Live example:

Original blog article:

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:

Easing list

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

Notes

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