Animated slideUp & slideDown Of Elements In Pure JavaScript – dom-slider

Preview:

Description:

dom-slider is a pure JavaScript slide animation library for animated slideUp and slideDown of elements within the document.

A great alternative to jQuery’s slideToggle(), slideDown(), and slideUp() methods.

Can be used to toggle anything (like dropdown, accordion, popover, etc) from hide to show and vice versa.

See Also:

• ES6 slideUp & slideDown Library
• Show/Hide Matched Elements With Smooth Slide Motion – slideToggle
• Smooth Slide Toggle In Vanilla JavaScript

How to use it:

1. To get started, load the minified version of the dom-slider library in the document.

<script src="./dist/dom-slider.js"></script>

2. Slide up/down or toggle an element as follows:

const el = document.querySelector('.myElement')

// toggle
slideToggle({
  element: el
})
// slide up
slideUp({
  element: el
})
// slide down
slideDown({
  element: el
})

3. Specify the animation speed. Default: 300.

slideDown({
  element: content, 
  slideSpeed: 800
})

4. Specify the animation delay. Default: 20

slideDown({
  element: content, 
  delay: 200
})

5. Determine the direction of the animation: ‘down’ or ‘up’.

slideDown({
  element: content, 
  slideDirection: 'up'
})

6. Apply a custom easing function.

slideDown({
  element: content, 
  easing: 'cubic-bezier(0.25, 0.1, 0.44, 1.4)'
})

7. Define the value of CSS display propery when the element is visible. Default: ‘block’.

slideDown({
  element: content, 
  visibleDisplayValue: 'inline'
})

Changelog:

v2.2.0 (04/25/2021)

• Allow dynamic heights by removing cachedStyles