Declarative Flexible Scroll Animation Library – Delighters.js

Preview:

Description:

Delighters.js is a lightweight, declarative, flexible, zero-dependency JavaScript scroll-triggered animation library.

The library lets you apply interactive animations to any element when they become visible in the viewport. Supports both mobile and desktop devices. It Degrades gracefully to your default styling.

How to use it:

Import the minified version of the Delighters.js library into the document.

<script src="delighters.min.js"></script>

Add the ‘data-delighter’ attribute to your elements.

<div class="demo" data-delighter>
  ...
</div>

Apply your own CSS3 animations to the element.

.demo.delighter {
  transition: all .3s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.demo.delighter.started {
  transform: none;
  opacity: 1;
}
.demo.delighter.started.ended {
  border: solid red 10px;
}

You can also specify the scroll position (start/stop threshold) at which you want to trigger the animation in the ‘data-delighter’ attribute.

<div data-delighter="start:0.3;end:0.95">
  ...
</div>

All default configuration options.

{
  attribute:  'data-delighter',
  classNames: ['delighter', 'started', 'ended'],
  start:      0.75, // default start threshold
  end:        0.75, // default end threshold
  autoInit:   true  // initialize when DOMContentLoaded
}