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>
<nav class="mainnav">
    <div class="logo">logo</div>
    <div class="listcontainer">
        <ul>
            <li><a href="#">first link</a></li>
            <li><a href="#" class="second">second link</a></li>
            <li><a href="#">third link</a></li>
        </ul>
    </div>
</nav>

JavaScript

var logo = $('.logo');
var listContainer = $('.listcontainer');
var secondAnchor = $('.second');
var timeline = new TimelineMax({ paused: true });
timeline.to(listContainer, 0.2, {
    autoAlpha: 0,
    ease: Power4.easeIn
});
timeline.fromTo(logo, 0.6, {
    backgroundColor: '#cc0',
    height: 'auto'
}, {
    height: 300,
    ease: Power4.easeInOut
});

secondAnchor.click(function () {
    timeline.play();
});

logo.click(function() {
    timeline.reverse();
});