NEI Animation

A simple, light-weight text animation package to animate each word separately or animate html elements on scroll visibility. A perfect way to make any website look more professional and modern.

This package is in beta, new features and updates will come.

Installation

You can either download the package files via GitHub or use the following command:

npm i nei-animation

Usage

Require the script and css file

// Require package
var NeiAnimation = require('nei-animation');

// Require css styling
import 'nei-animation/style.css'

Add data attributes

The main attribute is the data-nei attribute, here you define what animation you want upon visibility (see animation attributes):

<h1 data-nei="show-text">This sentence will be animated word for word.</h1>

Initiate the NeiAnimation class

<script>
let animate = new NeiAnimation({
    wordAppearSpeed: 70 // Speed in ms, optional
});
</script>

Attributes

All available attributes

Attribute	Example	Usage
data-nei	data-nei="show-text"	Set the desired animation
data-delay	data-nei-delay="200"	Set delay in miliseconds

Animation attributes

These are the attribute values that can be used for the data-nei attribute:

Attribute	Example	Usage
show-text	data-nei="show-text"	Animates text word for word
fade-up	data-nei="fade-left"	Animates element from left
fade-left	data-nei="fade-up"	Animates element from down to up

Issues

Feel free to report any issues on GitHub here.

Discord

Join the discord server to ask for help, report fixes or suggest new features.