Fadable

Fadable is a bit of JavaScript that finds all elements with a class of .fadable and, if they’re outside of the browser's viewport, changes their opacity to 0 and their scale to 95%. Then, when those elements are scrolled into view, Fadable undoes those changes via a transition.

View on GitHub

Made by the folks at The Outfit.

This Box Probably Didn’t Fade In

…and that’s OK because Fadable won’t change elements already in view.

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.

Implement Fadable

…in only two steps:

Step #1: Add a Class

Add a class of .fadable to any element that should fade in.

Step #2: Import The JavaScript

Get the Fadable JavaScript and import it at the bottom of your web page(s):

<script src="/path/to/fadable.js"></script>

That’s It

Check out the source of this page as an example.

Configuration

There are a number of details you can configure to suit your needs; open the Fadable JavaScript and look for the commented lines that explain what happens and when it happens.

Browser Support

Questions / Issues / Improvements

If you have any questions, if you’ve discovered an issue, or if you can think of any improvements, please use the Fadable GitHub repo to get involved:

Fadable on GitHub

Brought to You By