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

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


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