Easily animate DOM elements entering the viewport

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 si…



Animon

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



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

Print Share Comment Cite Upload Translate
APA
Benjamin Réthoré | Sciencx (2024-03-29T04:51:31+00:00) » Easily animate DOM elements entering the viewport. Retrieved from https://www.scien.cx/2021/05/31/easily-animate-dom-elements-entering-the-viewport/.
MLA
" » Easily animate DOM elements entering the viewport." Benjamin Réthoré | Sciencx - Monday May 31, 2021, https://www.scien.cx/2021/05/31/easily-animate-dom-elements-entering-the-viewport/
HARVARD
Benjamin Réthoré | Sciencx Monday May 31, 2021 » Easily animate DOM elements entering the viewport., viewed 2024-03-29T04:51:31+00:00,<https://www.scien.cx/2021/05/31/easily-animate-dom-elements-entering-the-viewport/>
VANCOUVER
Benjamin Réthoré | Sciencx - » Easily animate DOM elements entering the viewport. [Internet]. [Accessed 2024-03-29T04:51:31+00:00]. Available from: https://www.scien.cx/2021/05/31/easily-animate-dom-elements-entering-the-viewport/
CHICAGO
" » Easily animate DOM elements entering the viewport." Benjamin Réthoré | Sciencx - Accessed 2024-03-29T04:51:31+00:00. https://www.scien.cx/2021/05/31/easily-animate-dom-elements-entering-the-viewport/
IEEE
" » Easily animate DOM elements entering the viewport." Benjamin Réthoré | Sciencx [Online]. Available: https://www.scien.cx/2021/05/31/easily-animate-dom-elements-entering-the-viewport/. [Accessed: 2024-03-29T04:51:31+00:00]
rf:citation
» Easily animate DOM elements entering the viewport | Benjamin Réthoré | Sciencx | https://www.scien.cx/2021/05/31/easily-animate-dom-elements-entering-the-viewport/ | 2024-03-29T04:51:31+00:00
https://github.com/addpipe/simple-recorderjs-demo