es6-slide-up-down

Vanilla JavaScript micro function for animated slideUp/slideDown of elements written in ES6. The behavior equals jQuerys' slideUp and slideDown methods. It uses requestAnimationFrame and has no external dependencies.

See demo here: https://janrembold.github.io/es6-slide-up-down/example/

Installation

yarn add es6-slide-up-down

// or

npm install es6-slide-up-down

Usage

import {slideUp, slideDown} from 'es6-slide-up-down';
 
// grab some html element
const element = document getElementById('someElement');
 
// shorthand - slide up (close) element - Defaults: duration: 400ms, easing: easeOutQuad
slideUp(element);
 
// ...equals to 
slideUp(element, {
    duration: 400
});
 
// change animation duration [in ms]
slideUp(element, 1000);
 
// ...equals to
slideUp(element, {
    duration: 1000
});
 
// change easing function, see https://github.com/janrembold/es6-easings
import {easeInQuint} from 'es6-easings';
slideUp({
    easing: easeInQuint,
    to: 600
});
 
// slideDown has exactly the same options and usage
 

Options

The slideUp and slideDown methods take a single HTML element as first parameter. Second and optional parameter might be an Object or the animation duration as positive Integer.

{
    duration: [Integer], // optional, defaults to 400
    easing: [function] // optional, defaults to 'easeOutQuad'    
}

duration (optional)

The animation duration in milliseconds. Defaults to 400

easing (optional)

The easing function that is used to calculate the animation. See https://github.com/janrembold/es6-easings for easing variations. Defaults to easeOutQuad