JSFiddle - React, Tailwind, and code Playground

HTML

<button id="go">&raquo; test 1</button> (easing grouped into options)<br>
<button id="go2">&raquo; test 2</button> (easing text string)<br>
<br>
<br>
<div id="block">Hello!</div>
<br>
<button id="setbig">&raquo; Set Big</button>
<button id="setsmall">&raquo; Set Small</button>

CSS

div { 
    background-color:#bca; 
    width:100px; 
    border:1px solid green;
}

JavaScript

$("#go").click(function(){
    $("#block").animate({
        width: "50%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, {
        duration: 1500,
        easing: "schwing"  // incorrect easing name
    });
 });

 $("#go2").click(function() {
    $("#block").animate({
        width: "100px",
        opacity: 1,
        marginLeft: 0,
        fontSize: "1em",
        borderWidth: "1px"
    }, 1500, "schwing");  // incorrect easing name
 });

 $("#setbig").click(function(){
    $("#block").css({
        width: "50%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    });
 })
 
 $("#setsmall").click(function(){
    $("#block").css({
        width: "100px",
        opacity: 1,
        marginLeft: 0,
        fontSize: "1em",
        borderWidth: "1px"
    });
 })