DEV Community

Cover image for Easily animate DOM elements entering the viewport
Benjamin Réthoré
Benjamin Réthoré

Posted on

Easily animate DOM elements entering the viewport

#css #javascript #html #animation

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
Enter fullscreen mode Exit fullscreen mode

Add the default styles to your HTML page:

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

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();
Enter fullscreen mode Exit fullscreen mode

Custom selector

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

animon('h1');
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Data-duration

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

<h1 class="animonItem" data-duration="4s">
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
uzulth profile image
Clain Yann •

It's wonderful, Thanks a lot !

Read next

rigalpatel001 profile image

Mastering JavaScript Decorators

Rigal Patel -

viksingh profile image

7 Best Java IDEs for Developers

Vikas Singh -

vladislav_v_75b0533bb1e3 profile image

WebAssembly + JavaScript: Building a Real-Time Image Processing Tool

Vladislav V. -

chaseanderson2 profile image

Event & Event Listeners in JavaScript

Chase Anderson -