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

Preview:

Description:

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
$ 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
animon();
// Browser
Animon.animon();
// Or initialize it on a specific element
Animon.animon('h1');

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" 
    data-delay="500" 
    data-duration="5s">
    Animon JavaScript Library Example
</h1>

6. Add your own animations.

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