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 and then introduce nextSection

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

// build section animations

red_anim = new TimelineMax({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 TimelineMax({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 TimelineMax({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 !== $(this).data("timeline")){
        currentSection.tweenTo(0, {onComplete:goNextSection}).timeScale(4);
        nextSection = $(this).data("timeline");
    }else{
        //first time a button is clicked (no previous section open)
        currentSection = $(this).data("timeline");
        currentSection.play();            
    }    
}    
 
function goNextSection(){
    console.log("goNextSection() ");  
    nextSection.timeScale(1).play();
    currentSection = nextSection;
}