Animate elements entering the viewport

Animon gets out of the way and allows you to describe animations using class names and data-attributes.

Based on intersectionObserver, Animon weighs only 0.9kb, with zero dependencies.

Learn how to use it.


Import the library and its styles from a CDN:

<link rel="stylesheet" href=""/>
  <script src=""></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.


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'

  // Or with a custom selector

Import as an IIFE

<script type="text/javascript" src=""></script>
  <script type="text/javascript">


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:


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


Delays the entrace by x milliseconds:

<h1 class="animonItem" data-delay="400">Hello world<h1>


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;
          opacity 640ms 400ms cubic-bezier(0.5, 1, 0.89, 1),
          transform 640ms 400ms cubic-bezier(0.5, 1, 0.89, 1);
  } {
      opacity: 1;

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


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