GSAP-FadeToggle

gsap-fadetoggle.js

function fadeToggle(el1, el2, callback) {
    var tl = new TimelineMax()

    var fadeOutEl = el1
    var fadeInEl = el2
    var t = 0.3

    var checkVis = function() {
        var o = []
        if (el1.css('display') !== 'none') {
            o.push(el1)
        }
        if (el2.css('display') !== 'none') {
            o.push(el2)
        }
        return o
    }
    var fadeIn = function (el, time) {
      var tl = new TimelineMax()

      tl
      .set(el, {
          opacity: '0',
          display: 'block'
      })
      .to(el, time, {
        opacity: '1'
      })

      return tl
    }
    var fadeOut = function (el, time) {
      var tl = new TimelineMax()

      tl
      .set(el, {
        opacity: '1',
        display: 'block'
      })
      .to(el, time, {
        opacity: '0'
      })
      .set(el, {
        display: 'none'
      })

      return tl
    }

    tl
        .set(checkVis(), {
            clearProps: 'opacity,display'
        })
        .add(fadeOut(fadeOutEl, t))
        .call(function () {
            callback()
            tl.pause()
            setTimeout( function () {
              tl.play()
            }, 500)
        })
        .add(fadeIn(fadeInEl, t))


}