slide-element
A small (< 750 bytes gzipped) library for hiding & showing elements in a sliding fashion using the Web Animations API.
Code Examples
Slide Elements Down
import { down } from 'slide-element';
// Target any element (make sure it's set to `display: none`).
const aBox = document.getElementById("aBox");
down(aBox).then(() => {
// Will fire after a sliding animation is complete.
console.log("The box has been slid down!");
});
Slide Elements Up
import { up } from 'slide-element';
const aBox = document.getElementById("aBox");
up(aBox).then(() => {
console.log("The box has been slid up!");
});
Toggle Elements
import { toggle } from 'slide-element';
const aBox = document.getElementById("aBox");
toggle(aBox).then((open) => {
console.log(`The box has been slid ${open ? 'down' : 'up'}!`);
});
Looking for a more interactive, tweakable demo? Here's a CodePen
Installation Options
npm install slide-element