JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div id="demoWrapper">
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
<div id="nav">
    <button id="redBtn">go red</button>
    <button id="greenBtn">go green</button>
    <button id="blueBtn">go blue</button>
</div>
</div>

CSS

#demoWrapper{
    width:600px;
    height:400px;
    background-color:black;
}

#nav{
    position:absolute;
    width:580px;
    padding-left:20px;
    height:75px;
    top:325px;
    background-color:grey;
}
.box{
    position:absolute;
    width:50px;
    height:50px;
}

.red{
    background-color:red;
}
.green{
    background-color:green;
    left:60px;
}
.blue{
    background-color:blue;
    left:120px;
}

button{
    margin-top:28px;
    margin-right:20px;
}

JavaScript

//dennis fadeOut current element and restart requested section's timeline

var red = $(".red"),
    green = $(".green"),
    blue = $(".blue"),
    redBtn = $("#redBtn"),
    greenBtn = $("#greenBtn"),
    blueBtn = $("#blueBtn"),
    red_anim, green_anim, blue_anim,
    redSection, blueSection, greenSection,
    currentSection;

// build section animations



red_anim = new TimelineLite({paused:true});
red_anim.to(red, 1, {css:{top:200}})
    .to(red, 1, {css:{left:250}})
    .to(red, 1, {css:{scale:2, borderRadius:"50%"}});

green_anim = new TimelineLite({paused:true});
green_anim.to(green, 1, {css:{top:200}})
    .to(green, 1, {css:{left:250}})
    .to(green, 1, {css:{scale:2, borderRadius:"50%"}});



blue_anim = new TimelineLite({paused:true});
blue_anim.to(blue, 1, {css:{top:200}})
    .to(blue, 1, {css:{left:250}})
    .to(blue, 1, {css:{scale:2, borderRadius:"50%"}});


//build section data objects

currentSection = {};
redSection = {timeline:red_anim, element:red};
blueSection = {timeline:blue_anim, element:blue};
greenSection = {timeline:green_anim, element:green};

//associate section data objects with buttons

redBtn.data("section", redSection);
blueBtn.data("section", blueSection);
greenBtn.data("section", greenSection);

//set button actions

redBtn.click(navClick)
blueBtn.click(navClick)
greenBtn.click(navClick)

function navClick(){
    if(currentSection != $(this).data("section")){ 
        if(currentSection.element){
            TweenLite.to(currentSection.element, 1, {css:{autoAlpha:0}});
        }                
        currentSection = $(this).data("section");
        TweenLite.set(currentSection.element, {css:{autoAlpha:1}});
        currentSection.timeline.timeScale(1).restart();
    }
}