Анимация появления текста

Не понимаю, как добиться такого эффекта появления текста

Нужно что бы одна линия заполнилась, некоторый delay, скрылась в правую сторону Но что бы все шло по очереди, сначала первая > вторая > первая скрылась > третья (если есть) > вторая скрылась. И только потом появляется контентный текст.

И все в порядке очереди, сам контентный текст просто появляется. Интересует, как создать очередь для title и что бы закрашивало сам текст, а не весь блок

Сделал так, но это не совсем то, что нужно https://jsfiddle.net/fsjz427x/1/

    // text
    $.fn.animate_Text = function() {
        var string = this.text();
        return this.each(function(){
            var $this = $(this);
            $this.html(string.replace(/./g, '<span class="new">$&</span>'));
            $this.find('span.new').each(function(i, el){
                setTimeout(function(){ $(el).addClass('div_opacity'); }, 20 * i);
            });
        });
    };
    // title
    $.fn.animate_Text_title = function() {
        var string = this.text();
        return this.each(function(){
            var $this = $(this);
            $this.html(string.replace(/./g, '<span class="new">$&</span>'));
            $this.find('span.new').each(function(i, el){
                setTimeout(function(){ $(el).addClass('div_opacity'); }, 20 * i);
            });
        });
    };
    //mask title
  $('.portnoy-items__item').each(function() {
    $this = $(this);                
    var itemTitle = $this.find('.title div:first-child').html();
    $this.find('.title').append('<div class="mask">'+itemTitle+'</div>');
    $this.addClass("show").delay(700).queue(function(){
      $this.find('.title-original').show().animate_Text().dequeue();
      $this.find('.title .mask').show().animate_Text_title().dequeue();
      $this.find('.text').show().animate_Text().dequeue();
    });
  });

Спасибо!