javascript-pour-les-jedis-episode-2-snippet-05.html

<style>
  #content {
    width: 27px;
    height: 40px;
    background: red;
    position: relative;
    border-radius: 50%;
    line-height: 40px;
    padding-left: 14px;
    color: white;
  }
</style>

<div id="content"> ♥ </div>
<button id="animateRight">Animate Right</button>

<script>

const animateRight = function() {
  let tick = 0;
  const content = document.querySelector('#content');
  const timer = setInterval(function(){
    if(tick < 200){
      content.style.left = tick + 'px';
      tick += 1;
    }
    else {
      clearInterval(timer);
    }
  }, 1000/60);
};

const click = function(){
  animateRight();
};

document.querySelector('#animateRight').addEventListener('click', click);
  
</script>