front-end-dojo/src/javascript/_fadeFunctions.js

Library full of useful CSS, Sass, Styled-components, JavaScript, React functions, mixins, utilities, etc.

// Fade in function
const fadeIn = (element) => {
  let elementOpacity = 0.1 // initial opacity

  let timer = setInterval(() => {
    if (elementOpacity >= 1){
      clearInterval(timer)
    }

    element.style.opacity = elementOpacity

    elementOpacity += elementOpacity * 0.1

    element.style.display = 'block'
  }, 15)
}

// Fade out function
const fadeOut = (element) => {
  let elementOpacity = 1 // initial opacity

  let timer = setInterval(() => {
    if (elementOpacity <= 0.1){
      clearInterval(timer)

      element.style.display = 'none'
    }

    element.style.opacity = elementOpacity

    elementOpacity -= elementOpacity * 0.1
  }, 15)
}