JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<div class="bars">
  <div class="bar" data-max="100"></div>
  <div class="bar" data-max="150"></div>
  <div class="bar" data-max="10"></div>  
</div>

CSS

.bars{
  display: flex;
  margin-top: 300px;
  height: 500px;
  align-items: flex-end;
  justify-content: center;
}


.bar {
  width: 25px;
  background-color: tomato;
  height: 0;
  transition: height 0.5s ease-in-out;
}

.bar + .bar {
  margin-left: 10px;
}

JavaScript

var barsCont = document.querySelector('.bars')
var bars = Array.from(barsCont.children)
document.addEventListener('scroll', onDocumentScroll)

function onDocumentScroll(evt) {
/* debugger */
	if(document.scrollingElement.scrollTop >= barsCont.offsetTop) {
  	bars.forEach(changeBarsHeight)
  }
  
  function changeBarsHeight(bar) {
  	var barMaxHeight = Number(bar.dataset.max);
    var barCurrentHeight = bar.style.height ? Number.parseInt(bar.style.height) : 0;
  	if(barCurrentHeight < barMaxHeight) {
    	bar.style.height = barCurrentHeight + 5 + 'px'
    }		
  }
}