JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="menu"></div>

CSS

.menu{
    display: block;
    width: 40px;
    height: 40px;
    margin: 20px 0 0 20px;
    background-color: #4679BD;
    border: 1px solid #4679BD;
    border-radius: 50%;
}

JavaScript

TweenMax.from(".menu",2,{
    width: '10',
    height: '10',
    x: -30,
    y: -30,
    rotationX: 360,
    ease: Elastic. easeOut.config( 3, 0.5),
	});
TweenMax.to(".menu",1,{
    	width: '44',
    height: '44',
    x: 0,
    y: 0,
    ease: Elastic. easeOut.config( 5, 0.5),
    delay: 1.2
	});