JSFiddle - React, Tailwind, and code Playground

by spacexplorer

HTML

<script src="http://s.cdpn.io/33073/TweenMax.min.js"></script>
<script src="http://eightmedia.github.io/hammer.js/dist/jquery.hammer.min.js"></script>
<div id="mainColumn">
          <!-- begin nav -->
<div class="navigation">
                        <ul>
                            <li><a href="#" class="active">Home</a></li>
                            <li><a href="#">Products</a>
                                <ul><li><a href="#">Electrical Switchgears</a></li>
                                           <ul><li><a href="#">sub-product</a></li>
                                    </ul>                                        
                                    <li><a href="#">Product 2</a></li>
                                    <li><a href="#">Product 3</a></li>
                                    <li><a href="#">Link five is a long link that wraps</a></li></ul>
                            </li>
                            <li><a href="profile.html" target="_top">Profile</a></li>
                            <li><a href="contact.html" target="_top">Contact</a></li></ul> 
    <ul>
     </div> 
    <!-- end nav -->
  <button id="btn1">Tween Elements</button>
</div>
<div class="cell">
<div id="venDiagram">
  <div id="pmCircle" class="t">
    <div class="circle"></div>
    <div class="line1">Project</div>
    <div class="line2">Management</div>
  </div>
  <div id="ppCircle" class="r">
    <div class="circle"></div>
    <div class="line1">Planning</div>
    <div class="line2">& Programming</div>
  </div>
  <div id="ccCircle"  class="b">
    <div class="circle"></div>
    <div class="line1">Construction</div>
    <div class="line2">Consulting</div>
  </div>
  <div id="cqCircle"  class="l">
    <div class="circle"></div>
    <div class="line1">Cost</div>
    <div class="line2">& Quantum</div>
  </div> 
    <span id="vD_Left"><</span>
    <span id="vD_Right">></span>
    <span id="vD_Max">^</span>
</div>
</div>

<div id="mainContainer">
    <div id="elemContainer">
 ...

CSS

html, body{
  background:#444;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 100;
  color: #fff;
  
}
.element{
  width:10px;
  height:13px;
  background:#00f;
  position:absolute;
  font-size:11px;
  font-weight:bold;
  text-align:center;
  color:#FFF;
}
#mainContainer{
  width:220px;
  height:220px;
  position:absolute;
  border:solid 2px #000;
  background:#999;
  bottom: 0px;
  right: 0px;
}
#elemContainer{
  position:relative;
  width:210px;
  height:210px;
  margin:5px;
  /*background:#FFF;*/
}


/*---jaco----*/


#console {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 200px;
  height: 200px;
  background-color: rgba(0,0,0,.25);
  font-color: #fff;  
  font-family: "Verdana";
  font-size: 9px;
  overflow: scroll;
  overflow: auto;
overflow-x: hidden;
  overflow-y:scroll
}


.cell{
  
width: 20%;  
  float: right;
  position: relative;
  height: 500px;
  background-color: rgba(200,100,200,.1);
}

div#mainColumn {
  position: relative;
  float: left;
  width: 80%;
  min-height: 100%;
  background-color: rgba(80,180,0,.1);
  float: left;
  overflow: hidden;
}

div#venDiagram {
  position: relative;
  background-color: rgba(100,100,100,.15);
  width: 100%;
  height: auto;
  float: right;
  overflow: visible;
  border: 1px solid #fff;
  /*zoom: 2;*/
  
  
}



div#pmCircle, div#ppCircle, div#ccCircle, div#cqCircle {
  width: 100px;
  height:100px;
  position: absolute;
  left: 35px;
  top: 0px;
  z-index: 24;
  /*border: 2px dashed rgba(255,255,255,0.5);*/
}

div#pmCircle > div.circle, 
div#ppCircle > div.circle, 
div#ccCircle > div.circle, 
div#cqCircle > div.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(235,0,0,1.00);
  opacity: .4;
  position: absolute;
  left: 0px;
  top: 0px;
  /*border: 2px dashed rgba(255,255,255,0.5);*/
}

div#pmCircle > div.line1, 
div#ppCircle > div.line1, 
div#ccCircle > div.line1, 
div#cqCircle  > div.line1,
div#pmCircle > div.line2,...

JavaScript

$(document).ready(function(){

 setupVenDiagram();
  setupSwipeOnVenD();
  
  $(window).resize(function() {
    resizeVenDiagram();
    //fireAnotherFunction();
});
  
  
  
var amount = 4,
    // indRotation = 0 / amount,
    indRotation = (0 / amount)-90,
    element,
    elemContainer = $("div#elemContainer"),
    btn1 = $("button#btn1"),
    path = [{x:0,y:0},{x:100,y:-100},{x:200,y:0},{x:100,y:100},{x:0,y:0}],
    location = {x:path[0].x,y:path[0].y},
    tn1 = TweenMax.to(location, amount, {bezier:{curviness:1.5, values:path}, ease:Linear.easeNone}),
    tn2 = TweenMax.to(elemContainer, 5, {rotation:360,paused:true,ease:Linear.easeNone});    

for(i = 0; i < amount; i++)
{
    tn1.time(i)
    console.log(location.x + ' // ' + location.y);
    element = '<div class="element" id="element' + i + '">1</div>';
    elemContainer.append(element);
    TweenMax.set($("div#element" + i), {x:location.x,y:location.y + 100,rotation:((indRotation * i )- 90)})
}
 
btn1.click(function()
{
    tn2.play(0);  
});
  
});


/*
#pmCircle, #ppCircle, #ccCircle, #cqCircle
#venDiagram
*/


var circleW = 100;
var cirleRatio = .57;
var circleOffset;
var $pp;
var $cq;
var $cc;
var $pm;
var $venDiagram;
var $venWidth;

//test
var $console;


function setupVenDiagram(){
  console.log("setupVenDiagram 3");
  $console = $("div#console");
  
  circleOffset = (1 - cirleRatio)/2;
  
  
  test("setupVenDiagram 3");
  
  
  
  
$pm = $("div#pmCircle");
$cq = $("div#cqCircle");
$cc = $("div#ccCircle");
$pp = $("div#ppCircle");
$venDiagram = $("div#venDiagram");

//$pm.css("width","100px");
  /*
  $pm.css({
    "width":"100px",
           "height":"100px"
          });
  */
  
//corresponding GSAP transform (tweened over 2 seconds):
  //TweenLite.to($pm, 2, {rotationZ:45, left:"-=150"});
  /*
  TweenLite.to($cq, 2, {rotationZ:-90});
  TweenLite.to($cc, 2, {rotationZ:-90});
  TweenLite.to($pp, 2, {rotationZ:-90});
  TweenLite.to($pm, 2, {rotationZ:-90});
  TweenLite.to($venDiagram, 2,...