CSS @keyframes Like Sequence Animations On Scroll – Motus.js

motus.js is a JavaScript animation library for scroll-triggered animations that allow you to control the intermediate steps in an animation sequence similar to the CSS @keyframes.

How to use it:

Install & download the motus via NPM.

# NPM
$ npm install motus --save

Import the Motus library into your document.

<script src="dist/motus.js"></script>

Create a new Motus animation, set the start/end positions where the animation should starts and stops, specify the target element, and then control over the intermediate steps of the animation sequence as follows:

const myAnimation = new Motus.Animation(
      new Motus.Point(100),
      new Motus.Point(1800),
      document.getElementById('example'),
      {
        50: {
          width: {
            to: '200px'
          }
        },
        100: {
          width: {
            to: '100px'
          }
        }
    }
);

Activate the animation and done.

Motus.addAnimation(myAnimation);

Changelog:

v2.0.5 (04/01/2020)

• Bugs fixed

v2.0.4 (06/17/2019)

• Fixed an issue with camel case functions
• Added support for negative values

v2.0.2 (04/11/2019)

• Updated

v2.0.1 (03/21/2019)

• Updated

v2.0.0 (03/12/2019)

• Updated

v1.0.1 (06/30/2018)

• Fixed position update when scrolling