JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">SCROLL DOWN SCROLL DOWN
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>SCROLL DOWN SCROLL DOWN
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>SCROLL DOWN SCROLL DOWN
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>Create space
    <br>
    <br>
    <br>
    <br>
    <div class="q-titles">Stop percentage animation after the first scroll down</div>
    <div class="wrap">
        <div class="bar">
            <div class="barfill" data-width="90%"><span>test 1</span>
            </div>
        </div>
        <div class="bar">
            <div class="barfill" data-width="32%"><span>test 2</span>
            </div>
        </div>
        <div class="bar">
            <div class="barfill" data-width="20%"><span>test 3</span>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: #444;
}
#container {
    width: 80%;
    height: auto;
    color:#000;
    font-size: 10px;
    font-family: tahoma;
    text-transform: uppercase;
}
.bar {
    background-color: rgba(0, 0, 0, .2);
    position: relative;
    height: 20px;
    line-height: 20px;
    width: 100%;
    border-radius: 2px;
    margin-bottom: 10px;
    color:#fff;
}
.barfill {
    height: 100%;
    width: 0;
    background-color: rgba(0, 0, 0, .9);
    border-radius: 4px;
    line-height: 20px;
    text-align: left;
}
.barfill span {
    padding-left: 10px;
}
.perctext {
    position:absolute;
    text-align: center;
    top: 0;
    line-height:20px;
    left:-100px;
    padding:0 5px;
    height:20px;
    width:25px;
}

JavaScript

$(window).scroll(toDiv);

function toView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function toDiv() {

    if (toView(
    $(".wrap"))) {
        $('.barfill').each(function () {
            var width = $(this).data('width');
            $(this).animate({
                width: width
            }, 500);
            var $perctext = $('<div>', {
                'class': 'perctext',
                text: width
            });
            $perctext.appendTo(this);
            $perctext.delay(500).each(function (a) {
                $(this).delay(a * 250).animate({
                    'left': width
                }, 1000);
            });
        });
        $(window).unbind('scroll');
    }
}