Declarative Flexible Scroll Animation Library – Delighters.js

Category: Animation , Javascript , Recommended | March 7, 2018
Author: Q42
Views Total: 1,633
Official Page: Go to website
Last Update: March 7, 2018
License: MIT

Preview:

Declarative Flexible Scroll Animation Library – Delighters.js

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
}

You Might Be Interested In:


Leave a Reply