JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first">
    <div id="scroll">
        <div id="content">
            <div class="item">item1</div>
            <div class="item">item2</div>
            <div class="item">item3</div>
            <div class="item">item4</div>
        </div>
    </div>
</div>

CSS

#first {width:300px;height:150px;border:1px solid pink;}
#scroll {position:relative;width:100%;overflow:hidden;background-color:blue;}
#content {width:400%;}
#content .item {float:left;width:25%;height:150px;}

JavaScript

//Init
$("#content").css("marginLeft","0%");
console.log("Init "+$("#content").css("marginLeft"));

//Go !
myAnime(1);


function myAnime(step)
{
    //Animate
    $("#content").animate({marginLeft:'-=100%'},400,function(){
    
    //Correct values step 1 : margin-left : -100% & Margin step : -300px
    //Correct values step 2 : margin-left : -200% & Margin step : -600px
        
        console.log("Style step "+step+" :"+$("#content").attr("style"));
            console.log("Margin step "+step+" :"+$("#content").css("marginLeft"));
        
        
        //Step1
        if(step==1)
        {
            //Verify values
            if($("#content").attr("style")!="margin-left: -100%; " || $("#content").css("marginLeft")!="-300px")
                console.log("ERRORS on step "+step+" !!!");
            //All it's done, let's try a second step
            myAnime(2);      
        }
        //Step2
        else
        {
            //Verify values
            if($("#content").attr("style")!="margin-left: -200%; " || $("#content").css("marginLeft")!="-600px")
                console.log("ERRORS on step "+step+" !!!");
        }
        
            
    });
}