JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
<div id="wrapper"></div>

CSS

#wrapper {
   width:800px;
   height:400px; 
   color:white; 

}

.word{
    position:absolute;
    top:50px;
    width:800px;
    text-align:center;
    white-space:nowrap;
    font-size:180px;
    font-weight:800;
}

body{
background-color:#000;
}

JavaScript

var sentence = 'this is a test of the emergency broadcast system. This is only a test. In the case of a real emergency you would be in serious trouble by now :)';
var words = sentence.split(' ' );
var wrapper = $('#wrapper');

var wordsLength= words.length;
var timeline = new TimelineMax({repeat:20, onRepeat:increaseSpeed});    

for(i = 0; i < wordsLength; i++){
    wrapper.append('<div class="word">' + words[i] + '</div>');
} 

$('.word').each( function(index, element){
    timeline.insertMultiple([
        TweenLite.fromTo($(element), .5, {css:{scale:0, color:'white'}}, {css:{scale:1, color:Math.random() * 0xffffff}, ease:SlowMo.ease.config(.2, .9)}),
        TweenLite.fromTo($(element), .5, {css:{autoAlpha:0}}, {css:{autoAlpha:1}, ease:SlowMo.ease.config(.2, .9, true), immediateRender:true})
         ], index *.45);
});     
    
function increaseSpeed(){
timeline.timeScale(timeline.timeScale()+.5);        
    }