JSFiddle - React, Tailwind, and code Playground

by hh54188

HTML

<div style="width: 100px;"></div>

CSS

* { padding:0; margin:0; }
div {
    width: 100px;
    height: 100px;
    background: black;
}

JavaScript

var MAX = 300, duration = 1000;
var inc = parseFloat( (MAX - 100) / duration ) * 4;
// var inc = parseFloat( (MAX - 100) / duration );

var div = $('div')[0];
var width = parseInt(div.style.width, 10);

function animate (id) {
    width += inc;
    if (width >= MAX) {
        clearInterval(id);
        console.timeEnd("animate");
    }
    div.style.width = width + "px";
}

console.time("animate");
var timer = setInterval(function () {
    animate(timer);
}, 0)