Skip to content
Tiny utility to trigger animations on scroll.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Tiny utility to trigger animations on scroll. 800 bytes gzipped.


npm i mela --save


mela works by applying an is-visible class to an element when it enters the viewport.


It's configured using an attribute in your markup. For each element you wish to animate, define data-animate and pass it the values you would like to use:

<h1 data-animate='slide-up fast ease delay'>I will slide in!</h1>


Use CSS attribute selectors to define those transition values:

[data-animate] {
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;

[data-animate*="fast"] {
  transition-duration: 200ms;

[data-animate*="ease"] {
  transition-timing-function: ease-in-out;

[data-animate*="delay"] {
  transition-delay: 200ms;

[data-animate*='slide-up'] {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;

  &.is-visible {
    opacity: 1;
    transform: translateY(0);


Create an instance:

import mela from 'mela'

const animations = mela()

Then call that instance to bind elements and check position:


When the DOM changes, like after a page load, you'll need to rebind. Simply call the instance again:



By default mela only animates in once. To repeat the animation each time the element enters the viewport, pass reset to your data-animate attribute:

<h1 data-animate='slide-up fast ease delay reset'>I will slide in every time!</h1>

mela users vsbl internally, so to adjust how soon/late the animation occurs, use data-threshold:

<h1 data-animate='slide-up fast ease delay reset' data-threshold='0.25'>I will slide in every time!</h1>

If you want to apply a threshold value to all animations, or ensure all animations reset, you can pass these options to the constructor:

const animations = mela({
  threshold: 0.25,
  reset: true

Finally, if you'd rather use something other than data-animate:

const animations = mela({
  attribute: 'data-anim'


MIT License © Eric Bailey

You can’t perform that action at this time.