JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div id="box"></div>

CSS

#box {
    width: 100px;
    height: 10px;
    background: red;
}

JavaScript

var box = document.getElementById("box");

var time = 300,
        target = 1000,
        height = 0,
        startedAt;
(function animation( delta ){
        var ani = requestAnimationFrame( animation )
        
        if (startedAt == null) {
            startedAt = delta;
        }
    
        var timePassed = delta - startedAt
               
        console.log( timePassed )
        height = ( timePassed / time ) * target;
        box.style.height = height + 'px'
       
        if( height > 1000 ){
                cancelAnimationFrame( ani );
        }
})()