Trigger CSS Animations As Elements Enter The Viewport – Animon.js

Category: Animation , Javascript | May 28, 2021
Author: bnthor
Views Total: 95 views
Official Page: Go to website
Last Update: May 28, 2021
License: MIT


Trigger CSS Animations As Elements Enter The Viewport – Animon.js


Animon.js is a tiny JavaScript library that triggers CSS animations on elements as they enter the viewport.

Based on Intersection Observer API and with no third-party libraries.

How to use it:

1. Install and import the Animon.js.

# Yarn
$ yarn add animon

$ npm i animon --save
// ES Module
import { animon } from 'animon/dist/animon.esm.js';

// or
<link rel="stylesheet" href="dist/animon.css" />
<script src="dist/animon.iife.js"></script>

2. Initialize the Animon.js.

// ES Module

// Browser

// Or initialize it on a specific element

3. Add the CSS class ‘animonItem’ to the element that you want to aniamte on scroll.

<h1 class="animonItem">Animon JavaScript Library Example</h1><

4. Determine which animation you want to use. All possible animations:

  • fadeIn
  • fadeInLeft (default)
  • fadeInRight
  • fadeInDown
  • fadeInUp
  • scaleUp
  • scaleDown
<h1 class="animonItem">Animon JavaScript Library Example</h1>
<p class="animonItem" data-effect="fadeIn">Example</p>
<h2 class="animonItem" data-effect="fadeInRight">Keep Scrolling</h2>
<div class="animonItem" data-effect="fadeInDown">fadeInDown</div>
<div class="animonItem" data-effect="fadeInUp">fadeInDown</div>
<div class="animonItem" data-effect="scaleUp">fadeInDown</div>
<div class="animonItem" data-effect="scaleDown">fadeInDown</div><

5. Determine the delay & duration of the animation.

<h1 class="animonItem" 
    Animon JavaScript Library Example

6. Add your own animations.

.animonItem[data-effect="additionalEffect"] {
  /* CSS Animation Here */

.animonItem[data-effect="additionalEffect"].is-visible {
  /* CSS Animation Here */

You Might Be Interested In:

Leave a Reply