Vanilla JS - fade  

Simple Vanilla JS implementation of the fadeIn(), fadeOut(), fadeTo() and fadeToggle() methods. This little package once loaded will add the mentioned methods to the Element prototype. All of the above methods accept the same paramaters: [duration, easing, complete]. Furthermore the prefers-reduce-motion is natively supported. You can read more about it here.

• Installation
• Usage
• prefers-reduce-motion
• Broser support
• Demo

Find this usefull? ☕ Buy me a coffee!

Installation

This package can be downloaded from the NPM registry npm install vanilla-fade --save. Or included in via a standard script tag from this url. Once imported it will automatically initialize.

// IIFE
<script src="https://unpkg.com/vanilla-fade/dist/vanilla-fade.js">

// CJS
require('vanilla-fade/cjs'); // all the library
require('vanilla-fade/cjs/fadeIn'); // single animation
require('vanilla-fade/cjs/fadeOut'); // single animation
require('vanilla-fade/cjs/fadeToggle'); // single animation
require('vanilla-fade/cjs/fadeTo'); // single animation

// ESM
import 'vanilla-fade/esm'; // all the library
import 'vanilla-fade/esm/fadeIn'; // single animation
import 'vanilla-fade/esm/fadeOut'; // single animation
import 'vanilla-fade/esm/fadeToggle'; // single animation
import 'vanilla-fade/esm/fadeTo'; // single animation

Usage

After import the package the Element.prototype.fadeIn(), Element.prototype.fadeOut(), Element.prototype.fadeTo() and Element.prototype.fadeToggle() will be available to use. The methods accepts the following paramenters:

Element.fadeIn(duration = 250, easing = 'linear', complete = null)
Element.fadeOut(duration = 250, easing = 'linear', complete = null)
Element.fadeTo(duration = 250, opacity = NaN, easing = 'linear', complete = null)
Element.fadeToggle(duration = 250, easing = 'linear', complete = null)

• duration can be a number or a string representing and integer of milliseconds.
• opacity final opacity value. Required only in fadeTo
• easing should be one of the following string: [linear, quadratic, swing, circ, bounce].
• complete is a callback that will be executed after the animation completes.

The Element display property won't change after fading out. No assumption on the original display value or opacity value are made. Once triggered the opacity will go from 0 -> 1 and viceversa. So if the element original opacity was .5 this value won't be considered when toggling the fading effect.

Browser support

Babel will automatically transpile according to the following browserslist:

# Browsers that we support

defaults