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/[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();

Settings

var myEnami = new enami({
  selector: null, // parent element containing your animations, if null document will be used (useful when having multiple instances), usage: '#myElement'
  delay: null, // set delay to all animations, usage: '1s'
  duration: null, // set duration to all animations, usage: '1s'
  once: true, // if repeat the animations every time they appear on viewport or just once
  disableOnMobile: false, // if detect mobile, every animation will be on final state
  offset: '0px 0px 0px 0px', // intersection observer rootMargin, useful for offseting the viewport functioning
  threshold: 0, // intersection observer thershold property
  root: null, // intersection observer root to be used a viewport
  reset: false // i have no idea
})

Data attributes

// Single element usage:
data-enami="fade-up" // define the animation to be applied to this element
data-enami-delay=".2s" // define the delay to be applied to this element (css time format)
data-enami-duration=".2s" // define the delay to be applied to this element (css time format)
data-enami-once // future feature
data-enami-reset // future feature

// Multiple elements usage:
data-enami-children=".my-box" // define the children animations of this parent
data-enami-animation="fade-up" // define the animation to be applied to all the childrens
data-enami-stagger=".2s" // define the staggering time to be applied to all the childrens

// Added by the library
data-enami-in // when the element is on viewport
data-enami-out // when the element is out of viewport

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

var myEnamiElement = document.getElementById('myElement')

// When the element is on viewport
myEnamiElement.addEventListener('enami:animate-in', function (e) {
  console.log('Element in viewport')
});

// When the element is out viewport
myEnamiElement.addEventListener('enami:animate-out', function (e) {
  console.log('Element out of viewport')
});

// When an instance is destroy
document.addEventListener('enami:destroy', function (e) {
  console.log('An enami has been destroyed')
  console.log('Selector:', e.detail.target)
});

// When an new instance is initiated
document.addEventListener('enami:init', function (e) {
  console.log('An enami has been initialized')
  console.log('Selector:', e.detail.target)
});

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