Easily animate DOM elements entering the viewport

Benjamin Réthoré — Mon, 31 May 2021 12:25:29 +0000

Animon

I tried to create a JS package as simple as possible to animate DOM elements when they get into the viewport.

Package's repository
Demo site showing the animations

Usage

The installation and initialisation is pretty simple:

npm install -D animon

Add the default styles to your HTML page:

<link rel="stylesheet" href="https://unpkg.com/animon/dist/animon.css"/>

Then you can import animon and launch it. By default it animates all the elements that has an animonItem class:

import { animon } from 'animon';

animon();

Custom selector

You can target any element, passing a CSS selector to the animon function:

animon('h1');

DOM syntax

Animon will detect all elements that has a 'animonItem' classname, for example:

<section>
    <h1 class="animonItem">Hello World</h1>
    <p class="animonItem">Lorem ipsum dolor sit amet, tu quoque mi filii.</p>
</section>

In addition, animon 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="fadeInUp">Hey yah!</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="800">

Data-duration

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

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

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

DEV Community: Benjamin Réthoré