JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/mini-tween"></script>
<button onclick="run()">Run animation</button>
<div></div>

CSS

div {
  background: red;
}

JavaScript

var initHeight = 100
var maxHeight = 400

var playing = false
var div = document.getElementsByTagName('div')[0]
div.style.height = initHeight + 'px'

window.run = function() {
  if (playing) return
  playing = true
  var start
  var end

  if (div.clientHeight === initHeight) {
    start = initHeight
    end = maxHeight
  } else {
    start = maxHeight
    end = initHeight
  }

  tween(start, end, 2000, easeOutElastic, function(height) {
    div.style.height = height + 'px'
  }).then(function() {
    playing = false
  })
}

var c4 = (2 * Math.PI) / 3

function easeOutElastic(x) {
  return x === 0 ? 0 : x === 1 ? 1 :
    Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1
}