JSFiddle - React, Tailwind, and code Playground

by David Carballo

HTML

<div id="cajaXY"></div>
    <div id="informacion">
        <p>PosicionY: <span id="InfoPosicionY">0%</span></p>
        <p>PosicionX: <span id="InfoPosicionX">0%</span></p>
        <p><input id="iniciarAnim" type="button" onclick="iniciar_animacion();" value="Iniciar Animacion"/></p>
        <p><input id="dentenerAnim" type="button" onclick="detener_animacion();" value="Detener Animacion"/></p>
    </div>

CSS

#cajaXY {
            border: 3px solid black;
            overflow: hidden;
            font-size: 1em;
            margin: 5% 0 0 12%;
            padding: 0;
            position: absolute;
            width: 8%;
            height: 10%;
            top: 0;
            left: 0;
            background-color: #CEECF5;
        }
        
        #informacion {
            font-weight: bold;
            border: 2px solid black;
            padding: 10px;
            text-align: center;
            width: 125px;
            margin: 20% auto;
        }

JavaScript

var posicionY = 0;
        var posicionX = 0;
        var finalizarAnim1 = "";
        var finalizarAnim2 = "";
        var controlAnim = 1;
        
        function mover_mensajeSUM() {
           
            if (posicionY<70) {
                document.getElementById('cajaXY').style.top = posicionY + '%';
                posicionY += 1;
                document.getElementById('InfoPosicionY').innerHTML = posicionY + '%';
            } else{
                if ((posicionY==70) && (posicionX<70)) {
                    document.getElementById('cajaXY').style.left = posicionX + '%';
                    posicionX += 1;
                    document.getElementById('InfoPosicionX').innerHTML = posicionX + '%';  
                } else {
                    clearInterval(finalizarAnim1);
                    finalizarAnim2 = setInterval(mover_mensajeRES,50);
                    controlAnim = 2;
                }
            }
        }
        
        function mover_mensajeRES() {
                       
            if (posicionY>0) {
                    posicionY -= 1;
                    document.getElementById('cajaXY').style.top = posicionY + '%';
                    document.getElementById('InfoPosicionY').innerHTML = posicionY + '%';
            } else {
            
                if ((posicionX>0) && (posicionY<=0)) {
                    posicionX -= 1;
                    document.getElementById('cajaXY').style.left = posicionX + '%';
                    document.getElementById('InfoPosicionX').innerHTML = posicionX + '%';
                } else {
                    clearInterval(finalizarAnim2);
                    controlAnim = 1;
                }
            }
        }
        
        function iniciar_animacion (){

            if (finalizarAnim1 != "") {
                clearInterval(finalizarAnim1);
            }
            
            if (finalizarAnim2 != "") {
                clearInterval(finalizarAnim2);
            }
            
           ...