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 reverse currentSection

var red = $(".red"),
    green = $(".green"),
    blue = $(".blue"),
    redBtn = $("#redBtn"),
    greenBtn = $("#greenBtn"),
    blueBtn = $("#blueBtn"),
    red_anim, green_anim, blue_anim,
    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%"}});


//assign timelines to butttons

redBtn.data("timeline", red_anim);
blueBtn.data("timeline", blue_anim);
greenBtn.data("timeline", green_anim);


//set button actions

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

function navClick(){
    if(currentSection){
        currentSection.timeScale(4).reverse();
    }
    currentSection = $(this).data("timeline");
    currentSection.timeScale(1).play();
}