HTML5 Circular Animation (GSAP)

html5-circular-animation-gsap.markdown

HTML5 Circular Animation (GSAP)

Forked from GreenSock's Pen HTML5 Animated Ferris Wheel (GSAP).

A Pen by Suri on CodePen.

License.

index.html

<div class="orbit orbit-outer">
  <div class="orbit orbit-middle">
    <div class="orbit orbit-inner">
      <div class="orbit orbit-heart">
        <div class="center center-inner"></div>
        <div class="center center-middle"></div>
        <div class="center center-outer"></div>
      </div>
    </div>
  </div>
</div>

script.js

var orbit = $('.orbit'),
    centerInner = $('.center-inner'),
    centerMiddle = $('.center-middle'),
    centerOuter = $('.center-outer'),
    tl;

TweenLite.set(centerInner, {x:90, y:90});
TweenLite.set(centerMiddle, {x:90, y:90});
TweenLite.set(centerOuter, {x:90, y:90});

function addNodes( nodes ) {
  
  var space = 0,
      spaceNode = 0,
      nodeLoop = 0,
      orbitLoop = 0,
      orbitNames = Array( 'inner', 'middle', 'outer' ),
      numberNodes = 0;
  
  for ( orbitLoop; orbitLoop < nodes.length; orbitLoop++ ) {
    
    nodeLoop = 0;
    numberNodes = nodes[orbitLoop];
    space = 360 / numberNodes;

    for ( nodeLoop; nodeLoop < numberNodes; nodeLoop++ ) {
      
      spaceNode = space + ( Math.random() * ( space / ( numberNodes * 2 ) ) );
      //spaceNode = space;

      var newPivot = $("<div>", {class:"pivot pivot-" + orbitNames[orbitLoop]}).appendTo( $('.center-' + orbitNames[orbitLoop]) ),
          newNode = $("<a href='#' data-orbit='tl" + orbitNames[orbitLoop] + "' class='node node-" + orbitNames[orbitLoop] + "'>Text</a>").appendTo(newPivot);

      TweenLite.set(newPivot, {rotation: nodeLoop * spaceNode, transformOrigin:"0px " + (orbitLoop * 50 + 150 + 'px') });
      TweenLite.set(newNode, {rotation: -nodeLoop * spaceNode, transformOrigin:"50% 50%" });
    }
  }
}

// Build nodes
addNodes( Array(2, 5, 4) );
// Fade in
TweenLite.from(orbit, 1, {autoAlpha:0});
// Animation setup
tlinner = new TimelineMax( {repeat:-1} );
tlmiddle = new TimelineMax( {repeat:-1} );
tlouter = new TimelineMax( {repeat:-1} );
// Animate centers
tlinner.to( centerInner, 30, {rotation:360,  ease:Linear.easeNone} );
tlmiddle.to( centerMiddle, 40, {rotation:-360,  ease:Linear.easeNone} );
tlouter.to( centerOuter, 50, {rotation:360,  ease:Linear.easeNone} );
// Counter-animate nodes to keep text level
tlinner.to( $(".node-inner"), 30, {rotation:"-=360",  ease:Linear.easeNone},0 );
tlmiddle.to( $(".node-middle"), 40, {rotation:"+=360",  ease:Linear.easeNone},0 );
tlouter.to( $(".node-outer"), 50, {rotation:"-=360",  ease:Linear.easeNone},0 );



// Interaction
$('.node').mouseenter(function() {
  $(this).addClass('active');
  var orbit = $(this).data(orbit);
  TweenLite.to( $(this), 0.75, {backgroundColor:"rgba(255,255,255,0.9)", scale:1.25, ease: Elastic.easeOut });
  window[orbit.orbit].pause();
});
$('.node').mouseleave(function() {
  $(this).removeClass('active');
  var orbit = $(this).data(orbit);
  TweenLite.to( $(this), 2, {backgroundColor:"rgba(255,255,255,0.4)", scale:1, ease: Elastic.easeOut });
  window[orbit.orbit].resume();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>

style.scss

@import "compass/css3";

*,
*:after,
*:before {
	box-sizing: border-box;
}
body {
  margin: 50px;
  overflow: hidden;
  background: #f2f0f2;
}

.orbit {
  border-radius: 50%;
  border: 2px solid #fff;
  visibility: hidden;
  @include box-shadow( 0 0 30px rgba(#d52715,.1) );
}
  .orbit-heart {
    width: 200px;
    height: 200px;
    margin: 50px;
    @include box-shadow( 0 0 30px rgba(#d52715,.5), 0 0 250px #d52715 );
    @include background-image(radial-gradient(center center, 150px 150px, rgba(86,87,89,.75) 0%, rgba(41,42,44,.75) 100%));
    border: 6px solid #fff;
  }
  .orbit-inner {
    width: 300px;
    height: 300px;
    margin: 50px;
  }
  .orbit-middle {
    width: 400px;
    height: 400px;
    margin: 50px;
  }
  .orbit-outer {
    width: 500px;
    height: 500px;
    position: relative;
  }

.orbit-heart__initial {
  color: #fff;
  font-size: 25px;
  padding: 60px 20px;
  text-align: center;
  display: block;
}

.center {
  position: absolute;
}

.pivot {
  position: absolute;
  border: 1px solid #000;
}
  .pivot-inner {
    top: -150px;
  }
  .pivot-middle {
    top: -200px;
  }
  .pivot-outer {
    top: -250px;
  }

.node {
  position: absolute;
  width: 70px;
  height: 70px;
  left: -35px;
  top: -35px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  text-align: center;
  text-decoration: none;
  color: red;
  line-height: 1;
  padding: 25px 0;
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />