Fadable

Fadable is a little bit of JavaScript (753 bytes) that finds any element with a class of .fadable and, if it’s outside of the browser's viewport, changes its opacity to 0 and its scale to 95%. Then, when that element is scrolled into view, Fadable undoes those changes via configurable CSS transitions. Scroll to see how it works…

Fadable on GitHub

For example: this box Probably didn’t fade in

That’s OK because Fadable doesn’t change elements that are already in view when the page loads. Keep scrolling…

This box might have faded in

It really depends on how tall your browser is at the moment.

This box probably faded in

You get the gist.

Oh, you know what? Scroll back up — Fadable works in both directions.

Add Fadable to your project

Install it: npm i @theoutfit/fadable --save
Import it: import fadable from '@theoutfit/fadable'
Call it: fadable()
Class it: add a class of fadable to any element

If the default configuration is not to your taste, you can change it:

fadable({
  initialScale: 0.50,       // Initial scale, from 0 - 1
  transitionDuration: 1.5,  // Transition speed, in seconds
  edgeDistance: 80          // Distance from viewport edges, in pixels
})

Learn more

Questions / Issues / Improvements

If you have any questions, if you’ve discovered an issue, or if you can think of any improvements, please let us know: