JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div class="container">
    <div class="flying-text active-text">Customized Solutions</div>                        
    <div class="flying-text">Pipeline Integration</div>                        
    <div class="flying-text">Invnetory Services</div>  
    <div class="flying-text">Market Analysis</div> 
</div>

CSS

.container{
    width: 100vw;
    height: 100vh;
    margin:0 auto;
    color:#FFF;
    overflow:hidden;
    background-color: #000;
}
.flying-text{
    margin-left:-100px;
    color: #fff;
}

JavaScript

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

var int = setInterval(changeText, 3000);

function changeText() {

    var $activeText = $(".container .active-text");

    var $nextText = $activeText.next();
    if ($activeText.next().length == 0) {
        $nextText = $('.container .flying-text:first');
        
        // To fade all out
        var $allText = $(".container div");
        $allText .animate({
            opacity: 0
        }, 1000);
        $allText .animate({
            marginLeft: "-100px"
        });
    }

    $nextText.css({
        opacity: 0
    }).addClass('active-text').animate({
        opacity: 1,
        marginLeft: "250px"
    }, 3000, function() {
        $activeText.removeClass('active-text');
    });
}