<div class="animation-wrapper">
  <div class="feature-animation">
    <div class="easing-visualizer">
      <div class="wrapper bars-wrapper"></div>
      <div class="wrapper dots-wrapper"></div>
    </div>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
}

.animation-wrapper {
  width: 100%;
  max-width: 910px;
  margin-left: 32px;
  margin-right: 32px;
}

.easing-visualizer {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 910px;
  height: 455px;
  margin: -227px 0 0 -455px;
}

.easing-visualizer .wrapper {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.bars-wrapper,
.dots-wrapper {
  transform: translateZ(0);
}

.easing-visualizer .bar {
  width: 10px;
  height: 10px;
  margin: 0;
  background-image: linear-gradient(180deg, #373734 0%, #242423 52%, #0D0D0C 100%);
  transform-origin: 50% 50%;
}

.easing-visualizer .dot {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 0;
  background-color: currentColor;
  border-radius: 50%;
}

function fitElementToParent(el, padding) {
  var timeout = null;
  function resize() {
    if (timeout) clearTimeout(timeout);
    anime.set(el, {scale: 1});
    var pad = padding || 0;
    var parentEl = el.parentNode;
    var elOffsetWidth = el.offsetWidth - pad;
    var parentOffsetWidth = parentEl.offsetWidth;
    var ratio = parentOffsetWidth / elOffsetWidth;
    timeout = setTimeout(anime.set(el, {scale: ratio}), 10);
  }
  resize();
  window.addEventListener('resize', resize);
}

var easingsAnimation = (function() {

  var easingVisualizerEl = document.querySelector('.easing-visualizer');
  var barsWrapperEl = easingVisualizerEl.querySelector('.bars-wrapper');
  var dotsWrapperEl = easingVisualizerEl.querySelector('.dots-wrapper');
  var barsFragment = document.createDocumentFragment();
  var dotsFragment = document.createDocumentFragment();
  var numberOfBars = 91;
  var duration = 450;
  var animation;
  
  fitElementToParent(easingVisualizerEl, 0);

  for (var i = 0; i < numberOfBars; i++) {
    var barEl = document.createElement('div');
    var dotEl = document.createElement('div');
    barEl.classList.add('bar');
    dotEl.classList.add('dot');
    dotEl.classList.add('color-red');
    barsFragment.appendChild(barEl);
    dotsFragment.appendChild(dotEl);
  }

  barsWrapperEl.appendChild(barsFragment);
  dotsWrapperEl.appendChild(dotsFragment);
  
  function play() {
    
    var easings = [];
    for (let ease in anime.penner) easings.push(ease);
    easings.push('steps('+anime.random(5, 20)+')');
    easings.push('steps('+anime.random(5, 20)+')');
    easings.push('cubicBezier(0.545, 0.475, 0.145, 1)');
    var ease = easings[anime.random(0, easings.length - 1)];

    animation = anime.timeline({
      duration: duration,
      easing: ease,
      complete: play
    })
    .add({
      targets: '.easing-visualizer .bar',
      scaleY: anime.stagger([1, 44], {easing: ease, from: 'center', direction: 'reverse'}),
      delay: anime.stagger(7, {from: 'center'})
    })
    .add({
      targets: '.easing-visualizer .dot',
      translateY: anime.stagger(['-160px', '160px'], {easing: ease, from: 'last'}),
      delay: anime.stagger(7, {from: 'center'})
    }, 0);

  }
  
  play();
  
})();