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

<script src="https://unpkg.com/enami@0.8.0/dist/enami.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/enami@0.8.0/dist/enami.min.css">

2. Add your animation attribute data-enami="fade-up" on the HTML element you want to animate

<h1 data-enami="fade-up">Hello world!</h1>

3. Init the script

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

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

[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 or gsap