@eb3n/anime NPM

@eb3n/anime

Minimal animate on scroll library.

Installation

Install the package:

# yarn
yarn add -D @eb3n/anime

# npm
npm i -D @eb3n/anime

Import the script and styles, and initialise:

import anime from '@eb3n/anime'
import '@eb3n/anime/dist/anime.min.css'

anime()

Usage

Simply set the anime attribute on any elements you wish to animate (valid animation names):

<body>
  <p anime="fade">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</body>

Configuation

NOTE: duration and delay are limited to increments of 250 between 0 - 3000.

Global

You can pass options to anime when you initialise it:

anime({
  duration: 1000, // the length of the animation (in ms)
  delay: 0, // the delay before the animation plays (in ms)
  offset: 0 // the offset from the original trigger point (in px)
})

Per element

You can also configure anime per element:

<body>
  <p anime="fade" anime-duration="500" anime-delay="250" anime-offset="100">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</body>

Elements also have access to anime-trigger, which requires a CSS selector. This lets you begin an element's animation when another (usually parent) element is scrolled into view.

<body>
  <ul id="list">
    <li anime="fade-up" anime-delay="250" anime-trigger="#list">Lorem</li>
    <li anime="fade-up" anime-delay="500" anime-trigger="#list">ipsum</li>
    <li anime="fade-up" anime-delay="750" anime-trigger="#list">dolor</li>
    <li anime="fade-up" anime-delay="1000" anime-trigger="#list">Lorem</li>
    <li anime="fade-up" anime-delay="1250" anime-trigger="#list">Lorem</li>
  </ul>
</body>