JSFiddle - React, Tailwind, and code Playground

HTML

<head>
   <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js
"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.ui.min.js

"></script>


<div id="rightwrapper">
      <div class="center">
        
        <div id="intro">

          <div class="middle" id="firstline" style="float: right;">
            <div style="text-align: right;">
              <span id="firstword" class="introchange">Create</span> better websites
            </div>
          </div>
          <div class="middle" id="secondline" >
            <div style="text-align: left;">
              made for <span id="secondword" class="introchange">you</span>
            </div>
          </div>

        </div>
      </div>
    </div>
        </div>

CSS

body{
  background: #4D9EA3;
}

#logowrapper{
  text-align: center;
  margin: 0 auto;
}

.logo{
  width: 500px;
}

#intro{
  font-family: 'Roboto', sans-serif;
  color: #f7f7f7;
  font-size: 72px;
  font-weight: 300;
  opacity: 0;
}

.introchange{
  font-weight: 400;
}

.center{
  width: 800px;
  margin: 0 auto;
}

.middle{
  display: inline-block;
  position: relative;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#secondline{
  margin-top: 24px
}

JavaScript

$(function(){
  var first = ['Create','Design','Develop','Plan'];
  var second = ['you','clients','artists','us','everyone','people']
  i = 0;
  j = 0;
  maxfirst = first.length - 1;
  maxsecond = second.length - 1;

  var img = new Image();
  src = '/img/logo.gif';
  img.src=src;
  t=new Date().getTime();
  $("img").attr("src", src+'?'+t);


  //show everything after this
  function delay(){
    $('#intro').velocity("transition.slideUpIn", 1250);
    recenter('#firstline');
    recenter('#secondline');
    setInterval(firstwordchange,5000);
    setInterval(secondwordchange,6020);
  }


  //function to call when words are changed
  //paremeters are ONLY #firstline or #secondline
  function recenter(line){
    object = $(line);
    //get current width
    cwidth = $(line).width();
    console.log('current width: ' + cwidth)
    //get "parent" width
    pwidth = $('#intro').width();
    console.log('parent width: ' + pwidth)
    //amount to move is equal to pwidth - cwidth / 2
    move = (pwidth - cwidth)/2;
    console.log(move);
    if (line === '#firstline'){
      object.css('left',-move);
    }else{
      object.css('right',-move);
    }
  }

  function firstwordchange(){
    if (i < maxfirst){
      i++;
    }else{
      i = 0;
    }
    $('#firstword').velocity("transition.slideUpOut", 300);
      setTimeout(function(){
        $('#firstword').text(first[i]);
        recenter('#firstline');
      },200);
    $('#firstword').velocity("transition.slideUpIn", 300);
  }
  function secondwordchange(){
    if (j < maxsecond){
      j++;
    }else{
      j = 0;
    }
    $('#secondword').velocity("transition.slideUpOut", 300);
      setTimeout(function(){
        $('#secondword').text(second[j]);
        recenter('#secondline');
      },200);
    $('#secondword').velocity("transition.slideUpIn", 300);
  }

  setTimeout(delay,700)

});