Fade In Elements In Sequence On Page Scroll – Fadin

Preview:

Description:

Fadin is a small JavaScript library that sequentially fades in a group of elements on page scroll. Written in Typescript.

How to use it:

Installation.

# NPM
$ npm install fadin --save

Or directly import the Fadin library from a CDN.

<script src="https://unpkg.com/fadin"></script>

Initialize the Fadin on the target elements.

<div class="fade item">1</div>
<div class="fade item">2</div>
<div class="fade item">3</div>

document.addEventListener("DOMContentLoaded", () => {
  fadin('.fade')
});

Apply a smooth fade in animation to the elements when scrolled into view.

.fade {
  opacity: 0;
  transition: 0.3s opacity;
}

Apply a delay to the fade in animation.

document.addEventListener("DOMContentLoaded", () => {
  fadin('.fade', { delay: 200 })
});

Or via data-delay attribute:

<div class="fade item" data-delay="0.6s">3</div>