JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<link rel="stylesheet" href="http://www.greensock.com/_css/tour/greensock-theme/jquery-ui-1.9.1.custom.css">
<script src="http://www.greensock.com//js/src/tour/jquery/jquery-ui-1.9.1.custom.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<div class="demoWrapper" style="height:250px;">
    <div class="stage">
        <h1>Move your cursor over the images to see a variety of clip effects.</h1>
        <div class="clipHolder">
            <div class="clipbg">
                <div id="clip1" class="clipBox"></div>
             </div>
          <div class="clipbg">
                <div id="clip2" class="clipBox"></div>
          </div>    
          <div class="clipbg">    
                <div id="clip3" class="clipBox"></div>
          </div>    
          <div class="clipbg">    
                <div id="clip4" class="clipBox"></div>
          </div>    
    </div>
    <div class="multiCodeBlock">
<pre id="clipCode1" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box1, 1, {css:{clip:"rect(50px 100px 50px 0px)"}})</pre>
<pre id="clipCode2" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box2, 2, {css:{clip:"rect(100px 0px 100px 0px)"}})</pre>
<pre id="clipCode3" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box3, 2, {css:{clip:"rect(50px 50px 50px 50px)"}}) </pre>
<pre id="clipCode4" class="tweenCode overcode" style="margin-top:20px;">
TweenLite.to(box4, 2, {css:{clip:"rect(0px 100px 100px 100px)"}})</pre>        
        </div> 
    </div>                
</div>

CSS

body{
margin:0px;
}
strong{
    font-weight:bold;
    color:#fff;
}

h1{
    font-size:22px;
    font-weight:bold;
    margin-bottom:10px;
    color:#fff;
}
        
.demoWrapper{
    width:550px;
    height:400px;
    padding:1px;
    margin:-1px;
    background-color:#000;
}
.stage{
   height:325px;
   margin-top:15px;
   margin-left:15px;
   color:#ddd;
   font-family:Arial, Helvetica, Verdana;        
    -webkit-font-smoothing:antialiased;   
   
}

.tweenCode{
    font-size:14px;
    padding:4px;
    background-color:#fff;
    color:#000;
    margin-right:10px;
}


.demoWrapper a:link{
    text-decoration:none;
}


.overcode{
position:absolute;
    width:515px;
    visibility:hidden;
}

.clipHolder{
position:relative;
margin-left:40px;
}
.clipBox{
position:absolute;
width:100px;
height:100px;   background:url(http://www.greensock.com/_img/cssplugin_css3/love_100x100.jpg);  
clip:rect(0px 100px 100px 0px);
}
.clipbg{
position:relative;
margin-right:10px;
width:100px;
height:100px;
display:inline-block;
background-color:#333;
cursor:pointer;    
}

JavaScript

var box1 = $("#clip1"),
    box2 = $("#clip2"),
    box3 = $("#clip3"),
    box4 = $("#clip4");

box1.data('code', $('#clipCode1'));
box2.data('code', $('#clipCode2'));
box3.data('code', $('#clipCode3'));
box4.data('code', $('#clipCode4'));

clipTween1 = TweenLite.to(box1, 1, {css:{clip:"rect(50px 100px 50px 0px)"}, paused:true});
clipTween2 = TweenLite.to(box2, 1, {css:{clip:"rect(100px 0px 100px 0px)"}, paused:true});
clipTween3 = TweenLite.to(box3, 1, {css:{clip:"rect(50px 50px 50px 50px)"}, paused:true});
clipTween4 = TweenLite.to(box4, 1, {css:{clip:"rect(0px 100px 100px 100px)"}, paused:true});



      
    
box1.parent().mouseenter(function() {
    clipTween1.play();
    showHideCode($(this).children(":first").data('code'));   
    });  


box1.parent().mouseleave(function() {
    clipTween1.reverse();
}); 


box2.parent().mouseenter(function() {
    clipTween2.play();
    showHideCode($(this).children(":first").data('code'));
    });  


box2.parent().mouseleave(function() {
    clipTween2.reverse();
    
    });

box3.parent().mouseenter(function() {
    clipTween3.play();
    showHideCode($(this).children(":first").data('code'));
       
    });  


box3.parent().mouseleave(function() {
    clipTween3.reverse();
    });

box4.parent().mouseenter(function() {
    clipTween4.play();
    showHideCode($(this).children(":first").data('code'));
    });  


box4.parent().mouseleave(function() {
    clipTween4.reverse();
}); 


function showHideCode(elem){
    TweenLite.set(elem, {css:{autoAlpha:1}});      
    TweenLite.set(elem.siblings(), {css:{autoAlpha:0}});
}