Animlp.js NPM | npm.io

AnimLP

Fast and lightweight (only 3kb), a library for scroll animation web pages! ( vanilla JavaScript )

npm.io

Install

# Install with NPM
$ npm install --save animlp.js

# and with Yarn
$ yarn add animlp.js

Setup

// ES Modules
import animLP from 'animlp.js';

// CommonJS modules
var animLP = require('animlp.js');

add styles

// Webpack
@import '~animlp.js/lib/css/animLP.css';

// Other
@import './node_modules/animlp.js/lib/css/animLP.css';

Usage

The library works only with classes!

You need to add the class "animlp" to the element that will be animated.

Example:

<p class="card__title-1 animlp">Hello world!</p>

    import animLP from 'animlp.js';
    
    animLP({
      elements: 
        {
          class: 'card__title-1',     // The class of the element to be animated.
          duration: 800,              // Animation time in ms
          delay: 100,                 // Delay before animation starts
          func: 'ease',               // The function to perform the animation ( for example: cubic-bezier.com )
          animation: 'fadeDown'       // Animation name
        }
      },
      param: {
        once: false                   // Trigger animation "once" or "constantly"
      }
    });

If several elements are animated, the elements are wrapped in an array.

Example:

<p class="card__title-1 animlp">Hello world!</p>
<p class="card__title-2 animlp">Hello world again!!!</p>

import animLP from 'animlp.js';
    
animLP({
  elements: [
    {
      class: 'card__title-1',
      duration: 800,
      delay: 100,
      func: 'ease',
      animation: 'fadeDown'
    },
    {
      class: 'card__title-2',
      duration: 1000,
      delay: 300,
      func: 'ease-in-out',
      animation: 'fadeUp'
    }
  ],
  param: {
    once: false
  }
});

If different elements have the same animation, wrap the classes in an array.

Example:

<p class="card__title-1 animlp">Hello world!</p>
<p class="card__title-2 animlp">Hello world again!!!</p>
<p class="card__title-3 animlp">Yes, You know</p>

import animLP from 'animlp.js';
    
animLP({
  elements: [
    {
      class: ['card__title-1', 'card_title-3'],
      duration: 800,
      delay: 100,
      func: 'ease',
      animation: 'fadeDown'
    },
    {
      class: 'card__title-2',
      duration: 1000,
      delay: 300,
      func: 'ease-in-out',
      animation: 'fadeUp'
    }
  ],
  param: {
    once: false
  }
});