Animation library that mimics CSS keyframes when scrolling.

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);

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

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);

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);