Letter By Letter Animation With Delay In Loading

I'm trying to implement letter by letter animation on section with two slides. Currently I'm using jQuery code for that, but I'm afraid it's far from the ideal option. Here's my co

Solution 1:

Edited

Click here to see the whole code working.

Changes I made in css: I set the opacity of html text tags (<h1>,<h3> and <h4>) to 0, so they are hidden. Then in the animation function they are made visible again.

Changes I made in script: To start the second text animation with delay I used setTimeout() function:

setTimeout(function(){
    $('.secondary').animation();
},2000);

To detect the slide event of carousel, according to Bootstrap Documentation you can use this method:

$('.carousel').on('slid.bs.carousel', function () {
  // here is where you start the animation for the second slide
})

Re-Edit To track on which slide we are I introduced a variable caled: var $wichSlide. Here is the working method to start the animation when slide is changed:

$('.carousel').bind('slid.bs.carousel', function (e) {
    if($whichSlide == 1){
      //set $whichSlide position for the next slide event
      $whichSlide = 2//start to animate the text
      $('.introduction').animation();
      setTimeout(function(){
  $('.secondary').animation();
},2000);
      /*set the text on the second slide to be invisible
       * because we don't want it to appear before animation starts
       */
      $('.slide2').css("opacity",0);
    }elseif($whichSlide == 2){
      $whichSlide = 1;
      $(".carousel").carousel("pause");
      $(".slide2").animation();
      setTimeout(function(){
       $(".carousel").carousel();
      },3000);
      $('.introduction').css("opacity",0);
      $('.secondary').css("opacity",0);
    }
});

See the working code