4c0bf34ff3c342dfa15d

/*
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() {
  var element = $('<div class="creature"/>');
  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 TweenMax(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});
  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 * 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();

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

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](http://codepen.io/GreenSock/pen/uhKIy) by [GreenSock](http://codepen.io/GreenSock) on [CodePen](http://codepen.io/).

[License](http://codepen.io/GreenSock/pen/uhKIy/license).

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

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


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