JSFiddle - React, Tailwind, and code Playground

by sesubash

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/plugins/TextPlugin.min.js"></script>
<div>Build and cultivate your own community of</div>
<div id="compatibility">Followers</div>

CSS

#compatibility{
    width:200px; 
    font-size:20px;
    height:100px;
    display:inline-block;
    overflow:hidden;
    position:absolute;
    font-weight:bold;
}

JavaScript

$(document).ready(function(){
    var tl = new TimelineLite({onComplete:onAnimationComplete});
    text = $("#compatibility");
    tl.fromTo(text,1,{height:0},{height:100})
      .fromTo(text,1,{height:100},{height:0})
      .set(text,{text:"fans"})
      .fromTo(text,1,{height:0},{height:100})
      .fromTo(text,1,{height:100},{height:0})
      .set(text,{text:"members"})
      .fromTo(text,1,{height:0},{height:100})
      .fromTo(text,1,{height:100},{height:0});
    function onAnimationComplete(){
        tl.restart();
    }
});