fadr

A dependency-free micro library to fade things in and out.

CSS does not support animation or transition on display none, use this instead.

Usage

Using npm:

$ npm install --save fadr

The UMD build is also available on unpkg:

<script src="https://unpkg.com/fadr/dist/fadr.min.js"></script>

Examples

import fadr from 'fadr';

const div = document.querySelector('div');

/**
 * To fade in an element to display `flex` at 1000ms with a custom easing function.
 *
 */
fadr('in', div, {
    duration: 1000,
    easing: (t, b, c, d) => (-c * (t /= d) * (t - 2)) + b,
    display: 'flex',
    complete: () => {
        console.log('done');
    },
});

API

fadr(direction, element, [options])

direction

Type: String

• fade in - in
• fade out - out

element

DOM node to fade in or fade out.

Type: Node

options

Type: Object

duration

Type: number

Default: 400

easing

Type: function

Default : easeOutQuad

display

Type: string

Default: fade in - block, fade out - none

complete

Type: function

Default: undefined

Browser Support

• requestAnimationFrame

License

MIT © Jonathan Chan