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…


This content originally appeared on DEV Community and was authored by Benjamin Réthoré

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


This content originally appeared on DEV Community and was authored by Benjamin Réthoré


Print Share Comment Cite Upload Translate Updates
APA

Benjamin Réthoré | Sciencx (2021-05-31T12:25:29+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 ,<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 ]. 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 . 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: ]
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/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts