Outside in text fading effect

Video for reference: https://www.facebook.com/VICELANDTV/videos/237316389966953/ (The Eternal Derby (VICE WORLD OF SPORTS Trailer)

by lasha

HTML

<div class="block top">
  <div class="row-1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-2">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-3">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-4">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-5">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-6">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-7">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>
<div class="main-word">THIS IS THE BEST WORD HERE</div>
<div class="block bottom">
  <div class="row-7">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-6">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-5">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-4">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-3">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-2">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  <div class="row-1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>

SCSS

body {
  font-family: courier;
  font-size: 24px;
}
.block div {
  opacity: 0;
  span {
    //color: red;
  }
}

JavaScript

var $blocks = $('.block');
var $blockTop = $blocks.eq(0);
var $blockBottom = $blocks.eq(1);

$blocks.children().each(function(i, el){
	var idnum = 0;
  var $this = $(this);
  var splitRow = $this.text().split('');
  splitRow.forEach(function(el, i, arr){
  	arr[i] = '<span id="'+idnum+'">'+el+'</span>';
    idnum++;
    //console.log(el);
  });
  splitRow.sort(function() { return 0.5 - Math.random() });
	$this.html(splitRow);
});

function randomPulseElements(elContainer, maxDelayTime){
	var $els = $(elContainer).children();
  $els.each(function(i, el){
  	setTimeout(function(){
    	$(el).fadeOut().fadeIn();
    }, Math.random() * maxDelayTime );
  });
}

$blockTop.children().toArray().forEach(function(el, i){
	randomPulseElements(el, 2001);
	setTimeout(function(){
  	$(el).animate({opacity:1}, 1000).delay(1000).animate({opacity:0}, 1000);
  }, 100 * i);
});
$blockBottom.children().toArray().reverse().forEach(function(el, i){
	randomPulseElements(el, 2001);
	setTimeout(function(){
  	$(el).animate({opacity:1}, 1000).delay(1000).animate({opacity:0}, 1000);
  }, 100 * i);
});