Amazing Scroll Animation Library – AmazingScroll.js

AmazingScroll.js is a small JavaScript library that applies CSS based animations to DOM objects when they come into view.

How to use it:

Import the AmazingScroll.js library into the html page.

<script src="amazingScroll.js"></script>

Specify the scroll animation directly using data attribute on the element.

<div data-as="right:-300px->0; opacity: 0->1; transition:all 1s">
  ...
</div>

Or in the JavaScript:

<div data-as="fade-left">

animationList = {
  'fade-left': {
    'data':`left:-300px->0;
            transition:->all 1s`
  }
}

All configuration options.

start: {
  ratio:0.2,
  dataName:"ask",
  visibleAfterLoading:true
},
animation: {
  "fade-left":"left:-300px->0; transition: all 2s",
  "fade-top":"top:-200px->0; opacity:0->1; transition: all 0.5s"
}

Changelog:

09/22/2018

• Added option to specify the animation name and additional properties