Toggle Element With Smooth CSS3 Transitions – slide-element

Category: Animation , Javascript | April 29, 2021
Author: alexmacarthur
Views Total: 11 views
Official Page: Go to website
Last Update: April 29, 2021
License: MIT


Toggle Element With Smooth CSS3 Transitions – slide-element


slide-element is a super tiny JavaScript library to toggle the visibility of an element with CSS3 based smooth slide up/down transitions.

A great alternative to the jQuery slide & toggle methods that can be used to show/hide any element in a UI component like dropdown, accordion, tabs, and much more.

Also provides Promise support that enables you to do some cool stuff after the animation is finished.

How to use it:

1. Install the slide-element with NPM.

$ npm i slide-element --save

2. Import the components into your project.

// toggle an element based on the current state
import { toggle } from "slide-element";

// slide up
import { up } from "slide-element";

// slide down
import { down } from "slide-element";

3. Or load the slide-element.min.js script from the dist folder.

<script src="./dist/slide-element.min.js"></script>

4. Create an element to be shown and hidden by the slide-element.

<div id="example">
  Any Thing Here

5. Hide the element on page load.

.example {
  display: none;
  background: blue;

6. Enable a trigger button to toggle the element with slide up/down animations.

<button id="trigger">Click Me</button>
document.getElementById('trigger').addEventListener('click', (e) => {
// slide up

// slide down

7. Perform an action after the animation is finished using the promise then method.

SlideElement.toggle(document.getElementById("example")).then(() => {
// do something

8. Config the sliding animation.

  duration: .25,
  timingFunction: 'ease'


v1.0.2 (04/29/2021)

  • Clean up event listener handling.

v1.0.1 (04/29/2021)

  • Prevent potential issues with multiple instances, slim down even further.

v0.2.1 (11/09/2020)

  • Only set CSS properties when needed in order to guarantee smooth transitions.

v0.1.1 (10/01/2020)

  • Rewrite in TypeScript.

You Might Be Interested In:

Leave a Reply