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

Category: Animation , Javascript | June 17, 2019
Author: alexcambose
Views Total: 1,385
Official Page: Go to website
Last Update: June 17, 2019
License: MIT

Preview:

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

Description:

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

You Might Be Interested In:


Leave a Reply