Fade In/Out Elements On Scroll – ScrollFade.js

ScrollFade.js is a JavaScript library for fading in/out elements as they’re scrolled into and out of the viewport.

How to use it:

1. Add the scrollfade.js to the page.

<script src="assets/js/scrollfade.js"></script>

2. The necessary CSS styles for the fade in/out animations.

.scrollFade {
  opacity: 1;
  pointer-events: all;
}
.scrollFade--hidden {
  opacity: 0;
  pointer-events: none;
}
.scrollFade--visible {
  opacity: 1;
  pointer-events: all;
}
.scrollFade--animate {
  transition: opacity 0.4s ease-in-out;
}

3. Add the ‘scrollFade’ CSS class to the target elements and done.

<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
...