M o t u s

Animation library that mimics CSS keyframes when scrolling.

Star

Basic animation



const basicAnimation = new Motus.Animation(
    new Motus.Point(), // start point
    new Motus.Point(), // end point
    document.getElementById('cube-basic'), // element that will animated
    {
        100: {
            width: 200
        }
    }
);
Motus.addAnimation(basicAnimation);
Starts here!
Ends here!

Custom start and end point



const customStartPointAnimation = new Motus.Animation(
    new Motus.Point(document.getElementById('start-point')), // start point DOM element
    new Motus.Point(document.getElementById('end-point')), // end point DOM element
    document.getElementById('cube-startend'), // element that will animated
    {
        50: {
            width: {
                to: '200px'
            }
        },
        100: {
            width: {
                to: '100px'
            }
        }
    }
);
Motus.addAnimation(customStartPointAnimation);

Multiple properties

Starts here!
Ends here!


const customStartPointAnimation = new Motus.Animation(
    new Motus.Point(document.getElementById('start-point')), // start point DOM element
    new Motus.Point(document.getElementById('end-point')), // end point DOM element
    document.getElementById('cube-startend'), // element that will animated
    {
        50: {
            width: '200px',
            marginLeft: '100px',
        },
        100: {
            width: '100px',
            marginLeft: '200px'
        }
    }
);
Motus.addAnimation(customStartPointAnimation);
Starts here!
Ends here!

Custom starting values the smoothness of the animation will depend on what values you specify



const customStartPointAnimation = new Motus.Animation(
    new Motus.Point(document.getElementById('start-point-startvalues')), // start point DOM element
    new Motus.Point(document.getElementById('end-point-startvalues')), // end point DOM element
    document.getElementById('cube-startend'), // element that will animated
    {
        50: {
            width: {
                from: 0,
                to: 40,
                unit: 'mm',
            }
        },
        100: {
            width: {
                from: 10,
                to: 70,
                unit: 'mm',
            }
        }
    }
);
Motus.addAnimation(customStartPointAnimation);
    
Fork me on GitHub