JSFiddle - React, Tailwind, and code Playground

by helionbc

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);
            });
        }); 

    else {}
}