Amazing Scroll Animation Library – AmazingScroll.js

Category: Animation , Javascript | September 22, 2018
Author:PKrasinski
Views Total:79 views
Official Page:Go to website
Last Update:September 22, 2018
License:MIT

Preview:

Amazing Scroll Animation Library – AmazingScroll.js

Description:

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

You Might Be Interested In:


Leave a Reply