DOM Slider works like jQuery’s slideToggle (), slideDown (), and slideUp (), but it doesn’t use rendering: nothing. Uses CSS3 and element.scrollHeight transitions to animate the height of elements with an unknown height.
dom-slider is a pure JavaScript slide animation library for slideUp and slideDown animations for items within a document.
How to make use of it:
1. To get started, load the minified version of the dom-slider library within the doc.
<script src="./dist/dom-slider.js"></script>
2. Slide up/down or toggle a component 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 velocity.
slideDown({ element: content, slideSpeed: 800 })
4. Specify the animation delay.
slideDown({ element: content, delay: 200 })
5. Determine the direction of the animation: ‘down’ or ‘up’.
slideDown({ element: content, slideDirection: 'up' })
6. Apply a customized easing function.
slideDown({ element: content, easing: 'cubic-bezier(0.25, 0.1, 0.44, 1.4)' })
7. Define the value of CSS show properly when the component is seen.
slideDown({ element: content, visibleDisplayValue: 'inline' })
Animated slideUp & slideDown Of Elements, DOM Slider Plugin/Github
See Demo And Download
Official Website(BrentonCozby): Click Here
This superior jQuery/javascript plugin is developed by BrentonCozby. For extra advanced usage, please go to the official website.