JSFiddle - React, Tailwind, and code Playground

by Colin Soderstrom

HTML

<div id="textContainer">
    <p><span id="title"></span></p>
</div>

CSS

#textContainer {
        width: 300px;
        height: 100px;
        border: 1px solid black;
        overflow: hidden;
    }

JavaScript

$(document).ready(function() {
        var titles = ["Web Developer & Creative Thinker", "Graphic Designer & Creative Thinker", "Front-End Developer & Creative Thinker", "Email Marketing Specialist & Creative Thinker"];
        var currentIndex = 0;
        var $cycle = $('#title');

        function animateText() {
            $cycle.text(titles[currentIndex]);
            $cycle.animate({ opacity: 1 }, 1000).delay(3000).animate({ opacity: 0 }, 1000, function() {
                currentIndex = (currentIndex + 1) % titles.length;
                animateText();
            });
        }

        animateText();
    });