JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
<div id="navImage"></div>

<ul id="myLinks">
    <li id="NavLink"><a href="http://www.greensock.com" ><span>GreenSock.com</span></a></li>
    <li id="ForumLink"><a href="http://forums.greensock.com/" ><span>GreenSock Forums</span></a></li>
</ul>

CSS

#navImage{
    position:relative;
    width:50px;
    height:50px;
    background-color:#f00;
    margin-bottom: 10px;
}

JavaScript

navImage = $("#navImage");

function linkClicked(e){
    // prevent default click event across multiple browsers
    if(!e) var e = window.event;
    e.cancelBubble = true;
    e.returnValue = false;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
    if (e.preventDefault) {
        e.preventDefault();
    }
    
    // your transition effect
    TweenLite.to(navImage, 1, {css:{alpha:0, rotation:360, left:200}, ease:Power2.easeOut, onComplete: goToNextPage, onCompleteParams:[$(this).attr('href')]});
    
    // prevent default click event
    return false;
}

function goToNextPage(href){
    window.location = href;
}

$('#myLinks').find('a').click(linkClicked);