enami

enami is an animation-on-scroll library, similar to libraries like aos or wow.js but with a few differences.

This library uses [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), to check the visibility of the element, allowing to trigger css animations on horizontal scrolls, when using a smooth-scroll library or inside a slider/carousel. ### Features **Parent triggering:** You can specify a parent element, so you can trigger all the animated elements inside it. **Staggering:** Adds a delay between all the children animations to make a domino effect. ## Basic usage 1. Include script and css ``` html ``` 2. Add your animation attribute **data-enami="fade-up"** on the HTML element you want to animate ``` html

Hello world!

``` 3. Init the script ``` javascript var myEnami = new enami(); ``` ## Notes - Data attributes override options - All parameters are optional ## Methods

Method	What it does
`myEnami.destroy(state)`	Disconnect all observers. State can be null, 'initial' or 'final' depending on the final state you want your animations to be when destroyed

## Events #### Usage ``` javascript myEnami = document.getElementById('myElement') myEnami.addEventListener('enami:animate-out', function (e) { alert('Hello World') }); ``` #### List

Event	When is executed
`enami:animate-in`	When the element is in of the viewport
`enami:animate-out`	When the element is out of the viewport
`enami:destroy`	When the destroy method is called
`enami:update`	When the update method is called
`enami:init`	When the init method is called

## Custom animation CSS ```css [data-enami="my-animation"][data-enami-in] { animation: 2s fadeUp forwards cubic-bezier(0.19, 1, 0.22, 1); @keyframes myAnimation { from { transform: translate3d(0, 40px, 0) rotate(0.02deg); opacity: 0; } to { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; } } } ``` ## Note: This library is meant to work as a simple way to animate elements on your site, if you intend to do some heavy animations you are probably looking for libraries like [anime.js](https://github.com/juliangarnier/anime) or [gsap](https://github.com/greensock/GSAP)