JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sample">width is supposed to be animated till 500 but it stops at 300</div>

CSS

.sample{
  width:20px;
height:100px;
background-color:#cccccc;    
}

JavaScript

var myTargetWidth = 500; 
var isExecuted = false;
$(document).ready(function(){
    $('.sample').animate( { "width" : myTargetWidth },{
        duration : 5000,
        queue : false,
        step: function(now, fx) {
            if($(this).width() > 200 && $(this).width() < 203){
              myTargetWidth = 300;
               // $(this).animate({ "width" : myTargetWidth },{duration:500,queue:false});
                fx.end = 300;
                if(!isExecuted){
                    fx.start = now-65;
                    fx.end = 300;
                }
                isExecuted = true;
            }
        }
    });
});