Fade In Elements In Sequence On Page Scroll – Fadin

Category: Animation , Javascript | April 9, 2019
Author: dev-warner
Views Total: 2,551 views
Official Page: Go to website
Last Update: April 9, 2019
License: MIT


Fade In Elements In Sequence On Page Scroll – Fadin


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

How to use it:


$ 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", () => {

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>

You Might Be Interested In:

Leave a Reply