<h2>Super smooth play and pause with acceleration and deceleration</h2>
<button id="pause">pause</button>
<button id="play">play</button>
<div id="container">
  <div id="creature"></div>
</div>


 

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

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


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

button {
  padding:10px;
  margin: 0 10px 10px 0;
}

h2 {
  font-family:sans-serif;
  font-weight:normal;
}

//PURE JS ANIMATION
//no CSS animations or transitions

//https://www.greensock.com/gsap-js


var bezierTween,
    playBtn = document.getElementById("play"),
    pauseBtn = document.getElementById("pause");


bezierTween = new TweenMax("#creature", 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:990, y:400}],
      autoRotate:true
    },
  ease:Linear.easeNone, repeat:-1});

//tween the timeScale() of the bezierTween for smooth acceleration and deceleration
play.onclick = function(){
  TweenLite.to(bezierTween, 1, {timeScale:1});
};

pause.onclick = function(){
  TweenLite.to(bezierTween, 1, {timeScale:0});
};