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

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