JSFiddle - React, Tailwind, and code Playground

by sidd82

HTML

<div class="blinking-words">
  <div class="line">
    <span data-sentence=0>We</span>
    <span data-sentence=1>Tell</span>
    <span data-sentence=2>Delight</span>
    <span data-sentence="[1, 2]">Your</span>
    <span data-sentence=3>100</span>
  </div>
  <div class="line">
    <span data-sentence=3>Years</span>
    <span data-sentence=1>Story</span>
    <span data-sentence=3>of</span>
    <span data-sentence=0>Are</span>
    <span data-sentence=3>Combined</span>
  </div>
  <div class="line">
    <span data-sentence=1>With</span>
    <span data-sentence=1>Clarity</span>
    <span data-sentence=2>Audience</span>
    <span data-sentence=3>Experience</span>
    <span data-sentence=0>Wordsmiths</span>
  </div>
</div>

CSS

body {
  font-family: georgia;
  margin-top: 0px;
}

.blinking-words {
  text-align: left;
  font-size: 20px;
  line-height: 4.5;
  padding: 100px;
  background: #000;
  color: #fff;
}

.blinking-words .line span {
  color: #3a3a3a;
  transition: 1.1s all;
  word-spacing: 50px;
  position: relative;
  width: 19%;
  display: inline-block;
}

.blinking-words .line span.current {
  color: #E8B55A;
  transition: color 0s 1.5s;
  transition-timing-function: linear;
}

.blinking-words .line span::before {
  content: attr(data-letters);
  width: 0%;
  position: absolute;
  overflow: hidden;
  color: #E8B55A;
}

.blinking-words .line span.animate::before {
  transition: width 1.5s;
  transition-timing-function: linear;
}

.blinking-words .line span.current::before {
  width: 100%;
}

JavaScript

function staggeringEach(array, delay, callback) {
  step(0);

  function step(i) {
    if (i == array.length) {
      return;
    }
    callback(array[i]);
    setTimeout(function() {
      step(i + 1);
    }, delay);
  }
}

jQuery.fn.blinkingWords = function(options) {
  options = options || {};
  var timeout = options.timeout || 1000;
  var $this = jQuery(this);
  var $lines = $this.find(".line");
  var $words = $this.find("span");
  $words.each(function() {
    $(this).attr("data-letters", $(this).text());
  })
  var nsentences = 1 + Math.max.apply(Math, $words.map(function() {
    var sentence = $(this).data("sentence");
    return $.isArray(sentence) ? Math.max.apply(Math, sentence) : sentence;
  }));
  var current = -1;

  function step() {
    current = (current + 1) % nsentences;
    $words.removeClass("animate").removeClass("current");
    setTimeout(function() {
      var words = $words.filter(function() {
        var sentence = $(this).data("sentence");
        return sentence === current || ($.isArray(sentence) && sentence.indexOf(current) >= 0);
      });
      staggeringEach(words, 250, function(word) {
        $(word).addClass("animate").addClass("current");
      });
      setTimeout(step, timeout);
    }, 2000);
  }
  step();
}

jQuery(".blinking-words").blinkingWords({
  timeout: 4000
});