JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

HTML

<div id="roller" class="textroller"></div>

CSS

</style><!-- This closes the open style tag above. Just a jsFiddle thing. Please ignore. -->


<!-- Odometr includes -->
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-car.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

<!-- Extra styles for this example -->
<style>
.odometer {
    font-size: 100px;
}

JavaScript

setTimeout(function(){
   var elt         = document.getElementById("roller");
  var texts       = ["pancake"]
  elt.textroller  = new TextRoller({
      el: elt,
      values: texts,    // an array of texts.     default : [el.innerHtml]
      align: "left",    // right, left or middle. default : middle
      delay: 3000,      // in milliseconds,       default : 5000
      loop: false       // at the end, restart.   default : true
  });
}, 1000);