Animated fadeIn & fadeOut Of Elements In Pure JavaScript – dom-fader

dom-fader is a pure JavaScript fade animation library for animated fadeIn and fadeOut of elements within the document.

A great alternative to jQuery’s fadeToggle(), fadeIn(), and fadeOut() methods.

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

See Also:

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

How to use it:

1. Load the main script dom-fader.js from the dist folder.

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

2. Fade in/out or toggle an element as follows:

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

// toggle
fadeToggle({
  element: el
})
// fade in
fadeIn({
  element: el
})
// fade out
fadeOut({
  element: el
})

3. Determine the animation speed. Default: 300.

fadeIn({
  element: content, 
  fadeSpeed: 800
})

4. Specify the animation delay. Default: 20

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

5. Determine the direction of the animation: ‘in’ or ‘out’.

fadeIn({
  element: content, 
  fadeDirection: 'in'
})

6. Apply a custom easing function.

fadeIn({
  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’.

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