A Pen by younjisu.

A-Pen-by-younjisu.markdown

A Pen by younjisu

A Pen by younjisu on CodePen.

License.

index.html

<div id="ani"></div>

script.js

var easeInAni = function(){
  var incrementer = 0;
 function animate() {
  incrementer++;
  var step = Math.pow(1.05,incrementer);
  var ele = $('#ani');
  if(ele.css('left').replace(/px/,"") > 1000) return;
  var num = 10+step;
  ele.css('left', "+="+num);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
});


var circleAni = function() {
  var angle =0;
  var step = 0.05;

  function animateOscillation() {
     angle+=step;
     var xPos = 200 + 100*Math.cos(angle);
     var yPos = 200 + 100*Math.sin(angle);
    $('#ani').css({'left' : xPos, 'top' : yPos});
    requestAnimationFrame(animateOscillation);
  }

  requestAnimationFrame(animateOscillation);
}

circleAni()

style.css

div#ani {
  background-color : red;
  width : 30px;
  height : 30px;
  position : absolute;
  top : 200px;
  left : 300px;
}