Usage

Import the library and its styles from a CDN:

<link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/>
  <script src="https://unpkg.com/animon@1.0.1/dist/animon.iife.js"></script>
  <script>
      Animon.animon();
  </script>

Add the animonItem class to the elements you want to animate.

<h1 class="animonItem">Hello world<h1>

See options to learn how to change the default effect, delay animation and change the animation duration.

Installation

Install the library with npm:

npm install animon --save

Or with yarn:

yarn add animon

Import as an ES module

import { animon } from 'animon/dist/animon.esm.js';

  // Initialize it with default selector '.animonItem'
  animon();

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

Import as an IIFE

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

Options

By default, animon will detect all elements that has the animonItem classname. In addition, the library 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="scaleDown">Hello world<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="400">Hello world<h1>

Data-duration

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

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

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);
  }

Roadmap

Animon is under development but will remain simple. Its simplicity make it suitable for the most basic needs (landing pages, slides etc...). Though I have a few things in mind to improve it:

• More effects
• Legacy browsers support
• A "letter by letter" effect
• Option to animate elements only once