JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="header">
    <div class="header">
        <h2>
            Determined to master it.</h2>
            <div class="flipperCont">
            My name is <span style="font-family: 'Museo700';"><strong>Brendon Lamb</strong></span> and I'm 
            <span class="flipper"></span>
            <span>web developer.</span></div>
        <div class="reset">
            <a href="#"></a>
        </div>
    </div>
    <!-- filter -->
    <div class="loader">
        <span>loading</span>
    </div>
</div>

CSS

.flipper {
    white-space:nowrap; 
    overflow: hidden; 
    vertical-align: bottom;
}

JavaScript

//Flipper
    var flipWords = ["a professional", "an experienced", "an innovational", "an enthusiastic"];


    //Do not edit below//
    //set initial
    $(".flipper").html(flipWords[0]);
    var flipperCountCurrent = 0;
    setTimeout(flipper, 1500);
    function flipper() {

        if (flipperCountCurrent < flipWords.length - 1) {
            flipperCountCurrent += 1;
        } else {
            flipperCountCurrent = 0;
        }


        //no animation
        // $(".flipper").html(flipWords[flipperCountCurrent]);

        var flipperSpan = $('.flipper');
        var origWidth = flipperSpan.width();
        flipperSpan.fadeTo(500, 0, function () {
            flipperSpan.html(flipWords[flipperCountCurrent])
                .css("width", "auto");
            var newWidth = flipperSpan.width();
            flipperSpan.width(origWidth)
                .animate({ width: newWidth + 'px' }, 250)
                .fadeTo(500, 1);
        });




        setTimeout(flipper, 1500);

    }