JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="center">
    <header>
        <div class="offcanvas">
            <i class="bar"></i>
            <i class="bar"></i>
            <i class="bar"></i>
        </div>
    </header>
</div>

JavaScript

var body = document.body;
var center = document.getElementsByClassName('center')[0];
var header = document.getElementsByTagName('header')[0];
var offcanvas = document.getElementsByClassName('offcanvas')[0];
var barTop = document.getElementsByClassName('bar')[0];
var barMiddle = document.getElementsByClassName('bar')[1];
var barBottom = document.getElementsByClassName('bar')[2];
var isClicked = false;

TweenMax.set(body, { padding: 0, margin: 0, backgroundColor: '#de1b4a' });

TweenMax.set(center, {
    position: 'absolute',
    top: '50%',
    left: '50%',
    yPercent: -50,
    xPercent: -50
});

TweenMax.set(offcanvas, { backgroundColor: '#de1b4a' });

TweenMax.set([barTop, barMiddle, barBottom], {
    display: 'block',
    position: 'relative',
    width: 20,
    height: 2,
    marginTop: 5,
    backgroundColor: '#fff',
    transformOrigin: '50% 50%',
    pointerEvents: 'none'
});

offcanvas.addEventListener('mouseover', onOver, false);
offcanvas.addEventListener('mouseout', onOut, false);
offcanvas.addEventListener('click', onClicked, false);

function onOver() {
    if (!isClicked) {
        TweenMax.to([barTop, barBottom], 0.4, {
            xPercent: 50,
            ease: Back.easeOut.config(4)
        });
    }
}

function onOut() {
    if (!isClicked) {
        TweenMax.to([barTop, barBottom], 0.4, {
            xPercent: 0,
            ease: Back.easeOut.config(4)
        });
    }
}

function onClicked() {
    if (!isClicked) {
        isClicked = true;
        TweenMax.to(barTop, 0.4, {
            xPercent: 10,
            y: 7,
            rotation: -45,
            ease: Expo.easeOut
        });
        TweenMax.to(barBottom, 0.4, {
            xPercent: 10,
            y: -7,
            rotation: 45,
            ease: Expo.easeOut
        });
        TweenMax.to(barMiddle, 0.4, {
            xPercent: 50,
            autoAlpha: 0,
            ease: Expo.easeOut
        });
    } else {
        isClicked = false;
        TweenMax.to([barTop,...