JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
    height:2000px
}
.div {
    margin-top:500px;
}
#box {
    background:blue;
    width:100px;
    height:100px;
    margin-left:0px;
/*     transition: 2s all ease;
     */}
.margin-left-300 {
    margin-left: 300px !important;
/*         transition: 2s all ease;
         */}

JavaScript

$(window).scroll(function () {

    if ($(window).scrollTop() > 300) {
        $('#box').animate({marginLeft: "300px"}, 1000)
        //$('#box').addClass("margin-left-300");
    } else {
        $('#box').animate({marginLeft: 0}, 1000)
       // $('#box').removeClass("margin-left-300");
    }

})