mela

Custom fork of estrattonbailey/mela. Tiny utility to trigger animations on scroll. 800 bytes gzipped.

Usage

This fork of mela works by applying an mela-is-visible class to any '.mela-animate element when it enters the viewport. This fork assumes a single css transition will be used globally. estrattonbailey/mela allows for further customization using a data attribute.

Config

Define your transition in CSS.

Styles

Use a class to define the transition values:

.mela-animate {
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;

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

JavaScript

Create an instance:

import mela from 'mela'

const animations = mela()

Then call that instance to bind elements and check position:

animations()

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

animations()

Options

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 .mela-animate:

const animations = mela({
  class: 'anim'
})