JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder" style="position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -350px; "></div>

JavaScript

var paper = Raphael("holder", 700, 300);

    var messageText = "Why don't try yourself before asking your question?";
    messageText = Swap(messageText);
    var msg = paper.text(0, 20, messageText).attr({ "text-anchor": "start", "font-size": 21, "font-family": "Courier New" });

    function Swap(text) {
      return text.split('').reverse().join('');
    }
    
    var array = messageText.split("");
    var loopTimer;
    msg[0].textContent = '';
    function Looper() {
      if (array.length > 0) {
        msg[0].textContent += array.shift();
      } else {
        clearTimeout(loopTimer);
        return false;
      }
      loopTimer = setTimeout('Looper()', 7);
    };
    Looper();
    
    setTimeout(function () {
      messageText = Swap(messageText);
      array = messageText.split("");
      msg[0].textContent = '';
      Looper();
    }, 10 * messageText.length);