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

Category: Animation , Javascript | April 25, 2021
Author:BrentonCozby
Views Total:4,055 views
Official Page:Go to website
Last Update:April 25, 2021
License:MIT

Preview:

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

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:

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

You Might Be Interested In:


Leave a Reply