@zionbuilder/animatejs

AnimateJs

A lightweight alternative to wowjs, aos and other libraries that allows you to animate content on scroll.

It is using the IntersectionObserver API to watch elements when they enter the viewport instead of traditional "scroll" event.

Installation:

1. Via NPM

$ npm install @zionbuilder/animatejs

2. In browser

• Download Animate.css and add it to your page. You can use any animation css library so if you do not want animate.css, use a different library or use your own
• Download the script from https://github.com/zionbuilder/animatejs/releases
• Add the animatejs script to your page

Usage:

Markup:

<div  class="ajs__element"  data-ajs-animation="bounce">
	My fancy element
</div>

Script:

<script  type="text/javascript">
    animateJs({
	    selectorClass: 'ajs__element', // The selector for which you want to enable the anim
	    animationClass: 'animated' // The class to apply when the element enters the viewport
    })
</script>

Browser support:

Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
> 16	> 55	> 58	> 12.1	> 12.2	> 7.2	> 45

https://caniuse.com/#search=intersectionobserver

If you need to support older browsers, please load a polyfill like https://github.com/w3c/IntersectionObserver/tree/master/polyfill

TODO:

• [ ] Implement Mutation observer in order to watch for newly added elements
• [ ] Implement testing
• [ ] Create a better documentation