JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <h3 class="flying-text active-text">I believe</h3>
    <h3 class="flying-text">I can</h3>    
    <h3 class="flying-text">Fly</h3>
</div>

CSS

body{
    background-color:#000;
}

.container{
    background-color:#000;
    width:500px;
    margin:0 auto;
    color:#FFF;
    overflow:hidden;
    text-align: right;
}

.flying-text{
    margin-left:-100px;
}

JavaScript

function changeText(){
    var $activeText = $(".container .active-text");    
    
    var $nextText = $activeText.next(); 
    if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
    
    $activeText.animate({opacity:0}, 1000);
    $activeText.animate({marginRight: "-100px"});
        
    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginRight: "350px"}, 4000, function(){
        $activeText.removeClass('active-text');                                              
    });
}

$('.container .flying-text').css({opacity:0});
$('.container .active-text').animate({opacity:1, marginRight: "350px"}, 4000);

var int = setInterval(changeText, 5000);