CodePen

HTML

            
              <h1>Directional Rotation Visualizer</h1>
<h2>1: Select direction</h2>
<div id="radio">
  <input type="radio" name="direction" value="_short" checked="checked" id="short"><label for="short">shortest</label>
   <input type="radio" name="direction" value="_ccw" id="ccw"><label for="ccw">counter-clockwise</label>
  <input type="radio" name="direction" value="_cw" id="cw"><label for="cw">clockwise</label>
 </div>
<h2>2: Click on any of the numeric degree markers</h2>
<div id="demo">
  <div class="degree"></div>
  <div class="degree"></div>
  <div class="degree"></div>
  <div class="degree"></div>
  <div class="degree"></div>
  <div class="degree"></div>
  <div class="degree"></div>
  <div class="degree"></div>
  <div id="arrow"></div>
</div> 
<div id="output">//sample code</div>
<div id="notes">
  <p>GSAP's directional rotation functionality allows you to easily specify rotation in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path.</p>
  <p>Directional rotation can be used with rotationX, rotationY, and rotationZ.</p>
  <p>Directional rotation functionality is built into <a href="http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html">CSSPlugin</a>. For animations not tied to css values, check out the <a href="http://api.greensock.com/js/com/greensock/plugins/DirectionalRotationPlugin.html">DirectionalRotationPlugin</a>.</p> 
</div>
            
          
!
via HTML Inspector

CSS

            
              body {
	background-color:#000;
	margin:15px;
	color:#CCC;
  font-family:Arial, Helvetica, sans-serif;
  width:600px;
}

h1, h2 {
  color:#fff;
}

h2 {
  font-weight:normal;
  font-size:20px;
	color:#999;
}

#radio {
  padding:18px;
  background-color:#333;
}

#demo{
	width:250px;
	height:250px;
	position:relative;
	left:200px;
  margin-top:20px;
  visibility:hidden;
}

#arrow{
	position:absolute;
	left:75px;
	top:75px;
	background:url(http://s.cdpn.io/16327/arow.png);
	width:100px;
	height:100px;
}

.degree {
  position:absolute;
  width:20px;
  height:20px;
  padding:10px;
  background-color:white;
  text-align:center;
  cursor:pointer;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e0e0e0), color-stop(50%, #e0e0e0), color-stop(50%, #d3d3d3), color-stop(100%, #d3d3d3));
	background: -moz-linear-gradient(center top, #e0e0e0 0%, #e0e0e0 50%, #d3d3d3 50%, #d3d3d3 100%);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
	font-family: Helvetica Neue;
	font-size: 12px;
  line-height:20px;
	color: #666666;
	font-weight: bold;
	cursor: pointer;
	padding-top: 10px;
	padding-bottom: 10px;
}

.degree:hover{
  background-color:#666;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f06196), color-stop(50%, #ef6196), color-stop(50%, #ee4d88), color-stop(100%, #ee4d88));
	background: -moz-linear-gradient(center top, #f06196 0%, #ef6196 50%, #ee4d88 50%, #ee4d88 100%);
	color: #FFFFFF;
}

#output {
	padding:20px;
	font-family:"Courier New", Courier, monospace;
	background-color:#333;
	color:#ddd;
  margin-top:20px;
	border-left:solid 10px #91e600;
}

#notes p{
  margin-top:20px;
  line-height:24px;
}

label{
  margin-right:15px;
  color:#ddd;
}

a:link, a:active, a:hover, a:visited {
  color:#91e600;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
var degrees = $(".degree"),
    output = $("#output"),
    arrow = $("#arrow"),
    rotation,
		type = $('input[name=direction]:radio:checked').val();

degrees.each(function(index, elem) {
  TweenLite.set(elem, {
    left:105, 
    rotation:90 + (index * 45), 
    transformOrigin:"50% 125px", 
    text:String(index * 45), 
    borderRadius:10
  });
});


function setTweenValues() {
		rotation = Number($(this).text());
		var tweenCode = 'TweenLite.to("#arrow", 0.5, {rotation:"' + rotation + type +'"});';
		output.text(tweenCode);
}

function doTween(){
  TweenLite.to(arrow, 0.5, {css:{rotation:rotation+type}});
}


degrees.click(doTween);
degrees.mouseenter(setTweenValues);


$("input:radio").click(function() {
		type = $(this).val();
		output.html("&nbsp;");
})
	
TweenLite.to("#demo", 1, {autoAlpha:1, delay:0.3});
	
	
	
	

	
	
	


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................