slideDown.js

export function slideDown (
  el,
  end,
  { start = 0, easing = 'easeInOutQuint', speed = 300 } = {}
) {
  let currentPosition = 0
  const time = Math.max(0.1, Math.min(Math.abs(end) / speed, 0.8))
  const easingEquations = {
    easeOutSine (pos) {
      return Math.sin(pos * (Math.PI / 2))
    },
    easeInOutSine (pos) {
      return -0.5 * (Math.cos(Math.PI * pos) - 1)
    },
    easeInOutQuint (pos) {
      if ((pos /= 0.5) < 1) {
        return 0.5 * Math.pow(pos, 5)
      }
      return 0.5 * (Math.pow(pos - 2, 5) + 2)
    }
  }

  return new Promise((resolve, reject) => {
    const tick = () => {
      currentPosition += 1 / 60
      const position = currentPosition / time
      const t = easingEquations[easing](position)
      console.log(currentPosition, position, currentPosition + (end - currentPosition) * t)

      if (position < 1) {
        window.requestAnimationFrame(tick)

        el.style.height = `${currentPosition + (end - currentPosition) * t}px`
      } else {
        el.style.height = `${end}px`

        resolve()
      }
    }

    tick()
  })
}