JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<h1><span id="chkWidth" style="display: none;"></span></h1>
        <h1 id="changingtext">This is <span>changing</span> text</h1>
    </body>

CSS

h1 {
    text-align: center;
    font-family: helvetica, arial, sans-serif;
}

JavaScript

$(function() {
  var t1 = new Array("changing", "dynamic", "cool");
  var i = 0;
  var width;
  var tid = setInterval(
      function() {
          $("#changingtext span").animate({'opacity': 0}, 1000, function () {
            $(this).text(t1[i]);
            width = $('#chkWidth').text(t1[i]).width();
            console.log(t1[i], width);
            $(this).animate({'opacity': 1, 'width': width}, 1000);
        });
        
        if(i < t1.length -1) 
            i++;
        else i = 0;
        
      }, 3000 );
    
});