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

Category: Animation , Javascript | April 1, 2020
Views Total:994 views
Official Page:Go to website
Last Update:April 1, 2020


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 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),
        50: {
          width: {
            to: '200px'
        100: {
          width: {
            to: '100px'

Activate the animation and done.



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

You Might Be Interested In:

Leave a Reply