JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>

CSS

header {
    margin-top:200px;
    background-color:red;
    height:50px;
    width:500px;
    display: none;
}

JavaScript

var marginTop = 200;
var flag = false;
$('header').animate({
    'marginTop': '-=' + marginTop  + 'px'
}, {
    queue: false,
    duration: 2000,
    step: function(now){
        if(now <= marginTop/2 && !flag){
            $(this).fadeIn();
            flag = true;
        }
    }
});