Letters Animation

letters.js

// Animation 1
$(".title").lettering();
$('.button').click(function() {
  animation();
});

function animation() {
    var title1 = new TimelineMax();
    title1.to(".button", 0, {visibility: 'hidden', opacity: 0})
    title1.staggerFromTo(".title span", 0.5, 
        {ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80},
        {ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0}, 0.05);
    title1.to(".button", 0.2, {visibility: 'visible' ,opacity: 1})
}


// Animation 2
$.fn.characterize = function (wrapper, options) {
    var txt = this.text(),
        self = this;

    this.empty();

    wrapper = wrapper || '<span />';
    options = options || {};

    Array.prototype.forEach.call(txt, function (c) {
        options.text = c;
        self.append($(wrapper, options));
    });
};

function animate (element) {
    var wlc = $(element);
    wlc.characterize('<span />', {
        class: 'fd',
        css: {
            opacity: 0
        }
    });
    wlc.css('opacity', 1);

    $('.fd').each(function (i) {
        $(this).animate({opacity: 1}, (i + 1) * 300);
    });
}
animate('#txtBienvenido2');


// Animation 3
var animDelay = 0.1;
function playAnim(element) {
    $(element).lettering();
    for(var x = 0; x < $(element).children().length; x++){
        $(".char"+(x+1).toString()).css("animation", "port 3s "+(x*animDelay).toString()+"s 1 forwards");
    }
}
playAnim('#txtBienvenido');

            
            
//Deppend
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>