JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="animateObject.js"></script>
<script src="animationDelta.js"></script>
</head>
<body>

<div id="divContainer">

<div id="divTop"></div>
<div id="divMenu"></div>
<div id="divContent"></div>
<div id="divBottom"></div>

</div>

</body>
</html>

CSS

#divContainer {
    width:960px;
    height:1350px;
    position:relative;
    float:none;
    z-index:0;
    overflow:hidden;
    margin-left:auto;
    margin-right:auto;
}    

#divTop {
    width:960px;
    height:150px;
    position:relative;
    background-color:#FF0000;
    float:none;
    z-index:0;
    overflow:hidden;
}

#divMenu {
    width:960px;
    height:50px;
    position:relative;
    background-color:#00FF00;
    float:none;
    z-index:0;
    overflow:hidden;
}

#divContent {
    width:960px;
    height:1000px;
    position:relative;
    background-color:#0000FF;
    float:none;
    z-index:0;
    overflow:hidden;
}

#divBottom {
    width:960px;
    height:150px;
    position:relative;
    background-color:#FF0000;
    float:none;
    z-index:0;
    overflow:hidden;
}

JavaScript

function animateObject(animationOptions) {
    var startTime = new Date();
    
    var animationCalculation = setInterval(
    function() {
        var passedTime = new Date() - startTime;
        var animationProgress = passedTime / animationOptions.animationDuration;
        
        if(animationProgress > 1) {
            animationProgress = 1;
        }
        
        var animationDelta = animationOptions.animationDelta(animationProgress);
        var animationStep = animationOptions.animationStep(animationDelta);
        
        if(animationProgress == 1) {
            clearInterval(animationCalculation);
        }
    }, animationOptions.animationDelay)
}

function quad(animationProgress) {
    return Math.pow(animationProgress, 4);
}
        
function easeOut(animationDelta) {
    return function(animationProgress) {
        return (1 - animationDelta (1 - animationProgress));
        };
}    

var divTop = document.getElementById("divTop");
var divMenu = document.getElementById("divMenu");
var divContent = document.getElementById("divContent");
var divBottom = document.getElementById("divBottom");

divTop.onclick = function startAnimation() {
    var animateFrom = 150;
    var animateTo = 400;
    
    animateObject({
        animationDelay: 10,
        animationDuration: 3000,
        animationDelta: easeOut(quad),
        animationStep: function(animationDelta) {
            divTop.style.height = animateFrom + (animateTo - animateFrom) * animationDelta + "px";        
        }
    });
}