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/[email protected]/dist/enami.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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

Events

Usage

myEnami = document.getElementById('myElement')

myEnami.addEventListener('enami:animate-out', function (e) {
    alert('Hello World')
});

List

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