Animon

A simple way to animate DOM elements when they enter the viewport. See the demo

Installation

Install with npm:

npm install animon --save

Install with yarn:

yarn add animon

Add animon styles from a CDN:

<link rel="stylesheet" href="https://unpkg.com/animon/dist/animon.css"/>

Usage

Importing the library

As an ES module

// From node_modules
import { animon } from 'animon';
// OR from a CDN
import { animon } from 'https://unpkg.com/animon';

// Initialize it with default selector
animon();

// Or with a custom selector
animon('h1');

As an IIFE

<script type="text/javascript" src="https://unpkg.com/animon/dist/animon.iife.js"></script>
<script type="text/javascript">
  Animon.animon();
</script>

DOM syntax

Animon will detect all elements that has a 'animonItem' classname, for example:

<section>
    <h1 class="animonItem">Hello World</h1>
    <p class="animonItem">Lorem ipsum dolor sit amet, tu quoque mi filii.</p>
</section>

In addition, animon also detects three data-attributes that gives you more control:

Data-effect

This is the easing function that will be used on the element entrance:

<h1 class="animonItem" data-effect="fadeInUp">Hey yah!</h1>

There's a few effects available at the moment:

• fadeIn
• fadeInLeft (default)
• fadeInRight
• fadeInDown
• fadeInUp
• scaleUp
• scaleDown

Data-delay

Delays the entrace by x milliseconds:

<h1 class="animonItem" data-delay="800">

Data-duration

The transition duration, it must be expressed as a CSS "transition-duration" value (120ms, 2s etc...).

<h1 class="animonItem" data-duration="4s">

Custom effects

You can skip importing the default stylesheet entirely and create your own effects. All you have to do is declare a default state and its .is-visible CSS properties.

You may want to start with this:

/* Base */
.animonItem {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 640ms 400ms cubic-bezier(0.5, 1, 0.89, 1),
        transform 640ms 400ms cubic-bezier(0.5, 1, 0.89, 1);
}
.animonItem.is-visible {
    opacity: 1;
}

/* Custom effect */
.animonItem[data-effect="myEffect"] {
    transform: translateY(20rem);
}
.animonItem[data-effect="myEffect"].is-visible {
    transform: translateY(0);
}