JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <button class="btn"></button>
  <div class="modal">
   <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.</p>
  </div>
</body>
</html>

CSS

body{
    overflow: hidden;
}

.btn{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #21acec;
    border: none;
    outline: none;
    border-radius: 50%;
    bottom: 33px;
    right: -50px;
}


.modal{
    position: absolute;
    right: 90px;
    bottom: -150px;
    min-height: 60px;
    width: 300px;
    background-color: #fff;
    border: 1px solid #21acec;
    padding: 20px;
}

JavaScript

setTimeout(function(){
    animateElement(".btn", "right", -50, 20);
}, 500);

setTimeout(function(){
    animateElement(".modal", "bottom", -150, 50);
}, 1000);


function animateElement(elemSelector, direction, startPos, endPos){
    let element = document.querySelector(elemSelector), // Берёт указанный элемент
        position = startPos; // Берёт начальную позицию(я скрыл элементы за пределами видимой области)
    
    let interval = setInterval(function(){ // запускает цикл каждые 5 милисекунд
        if(position == endPos) clearInterval(interval); // когда переменная position равняется указанной нами переменной endPos - цикл завершается. endPos - это та позиция, на которой должен остановиться элемент
        position++; // сами понимаете по-моему
        element.style[direction] = position + "px"; // каждые 5 милисекунд меняет указанный параметр CSS на position
    }, 5);
}