JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vazio">
    SCROLL DOWN
</div>
<section class="viewerDemographics">
            <div class="wrapper">

                <div class="half-container">
                  
                  <ul id="demographicsBars">
                    <li><div data-percentage="71" class="bar"></div><span>0-11</span></li>
                    <li><div data-percentage="93" class="bar"></div><span>12-17</span></li>
                    <li><div data-percentage="95.6" class="bar"></div><span>18-24</span></li>
                    <li><div data-percentage="90.1" class="bar"></div><span>25-34</span></li>
                    <li><div data-percentage="88" class="bar"></div><span>35-44</span></li>
                    <li><div data-percentage="78.2" class="bar"></div><span>45-54</span></li>
                    <li><div data-percentage="61" class="bar"></div><span>55-64</span></li>
                    <li><div data-percentage="49.7" class="bar"></div><span>65+</span></li>
                  </ul>

                </div>

            </div>            
        </section>
<div class="vazio">
    SCROLL UP
</div>

CSS

.vazio{
    background: red;
    height: 900px;
}

.viewerDemographics {
  padding-top: 140px;
  padding-bottom: 170px;
  border-bottom: 1px solid #e5e7ea;
}

.viewerDemographics #demographicsBars {
  display: inline-block;
  height: 300px;
  padding: 0;
  margin: 0;
}
.viewerDemographics #demographicsBars li {
  display: table-cell;
  width: 63px;
  height: 300px;
  margin: 0;
  text-align: center;
  position: relative;
}
.viewerDemographics #demographicsBars li .bar {
  display: block;
  width: 30px;
  overflow: hidden;
  height: 1px;
  margin-left: 15px;
  background: #49E;
  position: absolute;
  bottom: 0;
}
.viewerDemographics #demographicsBars li .bar:hover {
  background: #5AE;
}

.viewerDemographics #demographicsBars li .bar:before {
  font-family: 'Avenir';
  color: #49E;
  font-size: 16px;
  content: attr(data-percentage) '%';
  position: absolute;
  top: -20px;
  width: 40px;
  left: -5px;
}

.viewerDemographics #demographicsBars li:last-child span{
   left: 6px;
   width: 96%;	
}

.viewerDemographics #demographicsBars li span {
  color: black;
  width: 100%;
  position: absolute;
  bottom: -2em;
  left: 0;
  text-align: center;
  font-size: 14px;
}

JavaScript

// Bar Chart Animation
    var barChartDrawn = false;

    function barChart(){
        barChartDrawn = true;
      $("#demographicsBars li .bar").each( function( key, bar ) {
        var percentage = $(this).data('percentage');
        
        $(this).stop().animate({
          'height' : percentage + '%'
        }, 1000, function() {
            $('.viewerDemographics #demographicsBars li .bar').css('overflow','inherit');
         });
      });
    };

// Scroll Call Animation

    $(window).scroll(function () {
        if (barChartDrawn) return;
        $('.viewerDemographics').each(function () {
            var imagePos = $(this).offset().top;
            var imageHeight = $(this).height();
            var topOfWindow = $(window).scrollTop();

            if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {

                barChart();

            } else {


            }
        });
    });