JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <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 = [ ['changing', '130px'], ['dynamic', '80px'], ['cool','150px'] ],
        i = 0;
    
    var tid = setInterval( function() {
      
      $("#changingtext span")
      .animate( { 'opacity': 0, 'width': t1[i][1] }, 500, function () {
            $(this).text( t1[i][0] );
      })
      .animate({'opacity': 1}, 1000);
        
      if(i < t1.length -1) 
        i++;
      else
        i = 0;
        
    }, 3000 );

});