Declarative Flexible Scroll Animation Library – Delighters.js

Category: Animation , Javascript , Recommended | March 7, 2018
Views Total:802 views
Official Page:Go to website
Last Update:March 7, 2018


Declarative Flexible Scroll Animation Library – Delighters.js


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>

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">

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

You Might Be Interested In:

Leave a Reply