GSAP-JS-Bezier:-Cubic.markdown

GSAP JS Bezier: Cubic

CSSPlugin + BezierPlugin fun powered by:
http://www.greensock.com/gsap-js/

BezierPlugin Docs: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

A Pen by GreenSock on CodePen.

License.

index.html

<div id="container"></div>
<div id="slider"></div>
 

script.js

/*
GSAP JS Demo
http://www.greensock.com/gsap-js/
Animation and Bezier motion: 
http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js
*/

var container = $("#container"),
    tl;

function getAnimation(num) {
  var element = $('<div class="creature"/>');
  element.append("<div>" + num + "</div>")
  
  container.append(element);
  //bezier magic provided by GSAP BezierPlugin (included with TweenMax)
  //http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html
  
 //create a semi-random tween 
  var bezTween = new TimelineLite();
  bezTween.to(element, 6, {
    bezier:{
      type:"soft", 
      values:[{x:150, y:300}, {x:300, y:30}, {x:500 + Math.random() *100, y:320*Math.random() + 50}, {x:650, y:320*Math.random() + 50}, {x:900, y:100}, {x:1100, y:500}],
      autoRotate:true
    },
    ease:Linear.easeNone});
  bezTween.to(element, 0.3, {scale:0.6, repeat:(bezTween.duration() / 0.3) -1, yoyo:true}, 0)
  
  bezTween.to(element.find('div'), 2, {rotation:360, repeat:2, ease:Linear.easeNone}, 0)
  
  return bezTween;
}

//create a bunch of Bezier tweens and add them to a timeline
function buildTimeline() {
  tl = new TimelineMax({repeat:6, onUpdate:updateSlider, delay:1});
  for (i = 0 ; i< 20; i++){
    //start creature animation every 0.17 seconds
    tl.add(getAnimation(i), i * 0.17);
  }
}


// --- jQueryUI Controls --- //

$("#slider").slider({
  range: false,
  min: 0,
  max: 1,
  step:0.001,
  slide: function ( event, ui ) {
    tl.pause();
    //adjust the timeline's progress() based on slider value
    tl.progress( ui.value);
    }
});

function updateSlider() {
  $("#slider").slider("value", tl.progress());
} 

$("#slider, .ui-slider-handle").mousedown(function() {
  $('html, #slider, .ui-slider-handle').one("mouseup", function(e){
    tl.resume();
  });
});

buildTimeline();

style.css

body{
  background-color:#333;
  margin:0;
  color:white;
}

#container{
  background-color:black;
  width:1000px;
  height:400px;
  overflow:hidden;
  position:relative;
  
}

#logo{
  position:absolute;
  left:805px;
  top:335px;
  z-index:1;
}

.creature{
  background:url(http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png);
  width:27px;
  height:29px;
  left:-30px;
  top:-30px;
  position:absolute;
  
}

.creature div {
  position:relative;
  top:-60px;
  font-size:30px;
  width:50px;
  height:50px;
  border-radius:50%;
  background:#2d2d2d;
  text-align:center;
  line-height:50px;
}


#slider{
  posistion:relative;  
  width:950px;
  top:20px;  
  left:25px;
}

.ui-slider .ui-slider-handle { 
  width: 40px !important; 
  margin-left: -20px !important; 
  height:40px !important; 
  margin-top:-10px !important;
}