JSFiddle - React, Tailwind, and code Playground

HTML

<div>Im going to ease the height</div>
<br><span>You add the function to the default jquery easing functions, I it this off of <a href="http://forrst.com/posts/How_to_create_custom_jQuery_easing_functions-OKb">This</a></span><br><br><br>
<ul>
    <li>t = the percentage of how much time has passed in the animation</li>
    <li>millisecondsSince = The number of milliseconds since the start of the animation</li>
    <li>startValue = This is hard-coded to 0</li>
    <li>endValue = This is hard-coded to 1</li>
    <li>totalDuration = The total number of millisconds that the animation will run for.</li>
</ul>

CSS

div {background:#ff6600}

JavaScript

$.easing.nameofeasingfunciton = function(t, millisecondsSince, startValue, endValue, totalDuration) {
    if(t<0.5) {
        return t*4;
    } else {
        return -2*t + 3;  
    }
};



$('div').animate({ height: '+=100px' }, 1000, 'nameofeasingfunciton');