[PHP][JS] - Animando texto dinâmicamente

[PHP][JS] - Animação de texto

// PHP 
// OBS: O uso das funções utilizadas, se o campo do admin for um wyswig irá ter quebra de linhas no texto utilize as funções que estão comentadas.
// Caso o campo do admin seja do tipo text ou textarea, não precisa utilizar essas funções.
 <?php 
    $settings = get_option('options_gerais'); 
    //$desc = $settings['desc'];
    //$desc = htmlentities($desc, null, 'utf-8');
    //$desc = str_replace("&nbsp;"," ",$desc);
    //$desc = str_replace("\n", "",    $desc);
    //$desc = str_replace("\r", "",    $desc);
    //$desc = preg_replace('/\s/',' ', $desc);                    
?>
<h2 class="title">Titulo Destaque</h2>
<p class="desc txt-rotate" data-period="1000" data-rotate='[ "<?php echo $desc;?>", "", ""  ]'></p>
                
                
// SCRIPT
var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');

  for (var i=0; i<elements.length; i++) {
    
    var toRotate = elements[i].getAttribute('data-rotate');
    var period   = elements[i].getAttribute('data-period');
    
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }

  }
  // INJECT CSS
  var css = document.createElement("style");
  
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { animation: pulse .4s ease-in-out infinite; } @keyframes pulse { 0% { border-right: 5px solid transparent; } 50% { border-right: 5px solid #292929; } 100% { border-right: 5px solid transparent; } }";
  document.body.appendChild(css); 

};

$(function() {
    
  $('a[href="#!..."]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
  });
});