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 basic
//this file is for starting out

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



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}});

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}});

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}});


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


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

function navClick(){
    $(this).data("timeline").play();
}