Developer-friendly On Scroll Animation JavaScript Library

Preview:

Description:

A modern and developer-friendly, scroll-triggered animation JavaScript library for the web & mobile.

It enables you to animate any elements using custom CSS animations when they come into view.

How to use it:

1. Install and import the module.

# NPM
$ npm i onscroll-animation

import OnScrollAnimation from "onscroll-animation";

2. Or include the bundled JavaScript file on the page.

<script src="/dist/animate.bundle.js"></script>

3. Create a new instance of the OnScrollAnimation and define your own CSS animations for each element as follows:

var animate = new OnScrollAnimation({
    ".element1": {
      parameters: {
        animationDuration: "1s",
        animationDelay: "2s",
        animationFillMode: "forwards",
        animationTimeFunction: "ease-in",
        pixelCorrection: "-200px",
        run: "once",
        // more CSS animation properties here
      },
      to: ["transform: translateX(-150px)"]
    },
    "element2": {
      from: ["left: -600px"],
      to: { left: "0px" }
    },
    ".element3": {
      from: ["right: -600px"],
      to: ["right: 0px"]
    },
    // more elements here
});

4. Start tracking the scroll event and apply the animations to the elements when they’re scrolled into view.

animate.init();

5. Pass animation parameters globally using the defaultParams method.

animate.defaultParams([
  "animation-duration: 1s",
  "animation-delay: 2s",
  "animation-fill-mode: forwards",
  "animation-time-function: ease-in",
  "pixel-correction: -200px", 
  "run: once",
  // ...
]);

6. You can also apply custom animations to elements directly using CSS @keyframes.

.custom {
  animation: customAnimation 1s forwards;
}
@keyframes customAnimation {
  from {
    ...
  }
  to {
    ...
  }
}

const animate  = new OnScrollAnimation({
      ".element1": {
        css: "custom"
      }
});