Developer-friendly On Scroll Animation JavaScript Library

Category: Animation , Javascript | May 7, 2021
Views Total:259 views
Official Page:Go to website
Last Update:May 7, 2021


Developer-friendly On Scroll Animation JavaScript Library


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


5. Pass animation parameters globally using the defaultParams method.

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

You Might Be Interested In:

Leave a Reply