JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<h2>This is a normal header without it enabled!</h2>
<h2 class="reveal-letters">This is a normal header with letters enabled!</h2>
<h2 class="reveal-words">This is a normal header with words enabled!</h2>
<h2 class="reveal-text">This is a normal header with text enabled!</h2>
<h2 class="reveal-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit consequatur similique eius veritatis quia obcaecati, dicta ducimus repellendus placeat! Aliquam excepturi illo facilis, delectus cupiditate beatae ut ex maiores! Neque.</h2>

SCSS

body {
  background: red;
}
.reveal-words, .reveal-letters, .reveal-text {
  visibility: hidden;
  &.active {
    visibility: visible;
    > span {
      span {
        transform: translate3d(0, 0, 0);
      }
    }
  }
  > span {
    display: inline-block;
    overflow: hidden;
    span {
      display: inline-block;
      transform: translate3d(0, 100%, 0);
      transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    }
  }
  &.reveal-words {
    > span {
    margin-right: 5px;
      span {
        transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
      }
    }
  }
}

JavaScript

(function($) {
	$('.reveal-letters, .reveal-words').each(function() {
  	var parts = $(this).text().split($(this).hasClass('reveal-words') ? ' ' : ''),
    		time = ($(this).hasClass('reveal-words') ? 15 : 30);
    parts = parts.map(function(part, idx) {
    	if (part === ' ') { return ' '; }
    	return '<span><span style="-webkit-transition-delay: ' + idx / time + "s; transition-delay: " + idx / time + 's;">' + part + '</span></span>';
    });
    $(this).html(parts.join(''));
  });
	$('.reveal-text').each(function(idx) {
  	var time = 15;
    $(this).html('<span><span style="-webkit-transition-delay: ' + idx / time + "s; transition-delay: " + idx / time + 's;">' + $(this).text() + '</span></span>');
  });
  $(function() {
  	$('.reveal-letters, .reveal-words, .reveal-text').addClass('active');
  });
})(jQuery);