Fadable

Fadable is a bit of JavaScript that finds elements with a class of .fadable, sets their opacity to 0 if they’re below the bottom of the browser window, then fades them in as they move into view.

View on GitHub

Made by the folks at The Outfit.

This Box Probably Didn’t Fade In

…and that’s OK! If the top edge of a Fadable element is above the bottom of the browser window on page-load, Fadable won’t hide it.

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 a few steps:

Step #1: Add a Class

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

Step #2: Use This CSS

Copy and paste this into your CSS:

.fadable {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 500ms;
}

.fadable.fadable--invisible {
  opacity: 0;
}

Step #3: 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 to see how we’re doing it.

Options / Adjustments

Fade in Point: to change the point at which Fadable elements start to fade in after they pass the browser’s bottom edge, open fadable.js and adjust the value assigned to fadeDistance. The default is 200 pixels.

Fade in Speed: to change the speed at which Fadable elements fade in, find the transition-duration property in the .fadable CSS and adjust it as you see fit. The default is 500ms (milliseconds).

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