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

Category: Animation , Javascript | October 1, 2020
Author: BrentonCozby
Views Total: 678 views
Official Page: Go to website
Last Update: October 1, 2020
License: MIT

Preview:

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

Description:

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:

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'
})

You Might Be Interested In:


Leave a Reply