JSFiddle - React, Tailwind, and code Playground

by midesowunmi

HTML

<div id="ship">Sailing ship1</div>
<div id="ship2">Sailing ship2</div>

CSS

#ship {
    width: 150px;
    height: 70px;
    background-color: #fdd;
    color: #fff;
    text-align: center;
    font-size: 18px;
    position: relative;
    
}
#ship2 {
    width: 150px;
    height: 70px;
    background-color: orange;
    color: #fff;
    text-align: center;
    font-size: 18px;
    position: relative;
    left: 150px;
    
}

JavaScript

function animateShip(elemId){
   var tick = 0;       
   var elem = document.getElementById(elemId);
   var timer = setInterval(function(){
       if(tick < 120) {
          elem.style.left = elem.style.top = tick + "px";
          tick++;
         } 
         else {
         clearInterval(timer);
              }
         }, 10); 
     }
animateShip("ship");
animateShip("ship2");