Word Animator

by kthornbloom

HTML

<div class="text-slides">
  <div class="ts-item">Guacamole Dip</div>
  <div class="ts-item">Fresh Lettuce</div>
  <div class="ts-item">Burrito Bowl</div>
  <div class="ts-item">Chips & Salsa</div>
</div>

CSS

/* Required */
.ts-item:not(:first-of-type) {
  display: none;
}

.ts-word {
  display:inline-block;
  white-space:nowrap;
  margin-right:.5em; /*space btwn words */
}

.ts-item span {
  display: inline-block;
  position: relative;  
  transition: all 400ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
  top: -40px;
  opacity: 0;
}

span.ts-animated {
  opacity:1;
  top:0;
}

/* Design CSS Only */

.text-slides {
  background: tomato;
  color:#fff;
  color:#fff;
  padding: 1em;
  display: inline-block;
}

.ts-word {
  border:1px solid rgba(0, 0, 0, .2);
}

span {
  border: 1px solid rgba(255, 255, 255, .2);
}

body {
  font-family: sans-serif;
  font-size:50px;
  text-align:center;
}

JavaScript

if ($('.text-slides').length) {

  // Wrap Letters In Spans
  $('.ts-item').each(function(index) {
    var words = $(this).text().split(" ");
    $this = $(this);
    $this.empty();
    $.each(words, function(i, el) {
      $this.append("<div class='ts-word'>" + el + "</span");
    });
  });  
  
  $('.ts-item .ts-word').each(function(index) {
    var characters = $(this).text().split("");
    $this = $(this);
    $this.empty();
    $.each(characters, function(i, el) {
      $this.append("<span>" + el + "</span");
    });
  });
  

  textSlides();

  function textSlides() {

    // Get qty of spans
    var a = $('.ts-item:first span').length;

    // Run animation on each
    for (var i = 0; i < a; i++) {
      letterAnimation(i)
    }

    // Letter Animation Function
    function letterAnimation(n) {
      setTimeout(function() {
        $(".ts-item:first span:eq(" + n + ")").addClass('ts-animated');
      }, 70 * n)
    }
  }

  setInterval(function() {
    $('.ts-item:first').fadeOut(200, function() {
      $('.ts-item:first span').removeClass('ts-animated');
      $('.ts-item:first').appendTo('.text-slides');
      $('.ts-item:first').show();
      textSlides();
    });
  }, 5000)
}