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">
    <div class="stage">
        <h1>MouseOver each word to see a different textShadow effect.
        <a href="#"><span id="text1" class="ts_text">GREENGLOW</span></a>
        <a href="#"><span id="text2" class="ts_text">BLACKOUT</span></a>
        <a href="#"><span id="text3" class="ts_text" style="position:relative;">GHOST</span></a>
    </div>    
    <div class="demoNav"> 
        <div id="to_slider"></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;
}



.ts_text{
font-size:40px;
    color:white;
    text-align:center;
    display:block;
    font-weight:bold;
    margin:20px 0px 0px 0px;
}
.demoWrapper{
    width:550px;
    height:400px;
    padding:1px;
    margin:-1px;
    background-color:#000;
}


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

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



.demoNav{
    padding:20px;
    height:20px;
    background-color:#555;
}

#tpvp_slider{
    width:500px;
    margin:auto;    
}

.to_box{
    position:relative;
    width:50px;
    height:50px;
    background-color:#0066ff;
    margin:10px 20px 20px 250px;
    display:inline-block;
}

JavaScript

//textShadow

var text1 = $("#text1"),
    text2 = $("#text2"),
    text3 = $("#text3");

var t1Tween = TweenLite.to(text1, .2, {css:{textShadow:"2px 2px 15px rgba(145, 233, 0, 1)", color:"#91ff00"}, paused:true});

var t2Tween = TweenLite.to(text2, .2, {css:{textShadow:"1px 1px 1px rgba(255, 255, 255, .5)", color:"#000"}, paused:true});

var t3Tween = TweenLite.to(text3, .2, 
                               
                           {css:{textShadow:"0px 0px 15px white", color:"none"}, paused:true});

text1.mouseenter(function(){
    t1Tween.play();
})
    
text1.mouseleave(function(){
    t1Tween.reverse();
})

text2.mouseenter(function(){
    t2Tween.play();
})    
text2.mouseleave(function(){
    t2Tween.reverse();
})    
    
text3.mouseenter(function(){
    t3Tween.play();
})    
text3.mouseleave(function(){
    t3Tween.reverse();
})