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

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

Preview:

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

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 */
}

You Might Be Interested In:


Leave a Reply