Issue with recalling my textille animation

Question

I'd like to do an animation for my paragraph which's content is being replaced after clicking on a button. So button #start_animation should start the textillate in animation and button #out_animation should cause out animation. And then I click on the third button #replaced_word which replaces the content of my paragraph.

Important: I always click in the same row:

1. #start_animation

2. #out_animation

3. #replaced_word

So the word should come in by an animation (fadeIn) then go out by another animation (fadeOut) then be replaced and then I click again on the first button #start_animation and it goes over and over again. The problem is that it works only for the first time. I mean till I click #start_animation for the second time. I wrote this question before with code but it was way too long so I did it in form of snippet. Any ideas?

$('#start_animation').click(function() {
  $('#sample_text').textillate('in');
  $('#paragraph').textillate('start');
  $('#paragraph').addClass('show');
});

/*-----------------------------------------------*/

$("#out_animation").click(function() {
  $('#sample_text').textillate('out');
  $('#paragraph').textillate('out');
  setTimeout(function() {
    $('#paragraph').removeClass('show');
  }, 1000);
});

var words = ["peter", "michael", "john", "derek", "chris"];

function replacing() {
  document.getElementById('paragraph').innerHTML = getRandomItem(words);
}

var btn2 = document.getElementById("replaced_word");

btn2.addEventListener("click", replacing);

function getRandomItem(array) {
  return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}

/*-----------------------------------------------*/

$(function() {
  $('#paragraph').textillate({
    loop: false,
    autoStart: false,
    in: {
      effect: 'fadeIn',
      shuffle: false,
      delay: 80
    },
    out: {
      effect: 'fadeOut',
      shuffle: false,
      delay: 40,
      reverse: true
    }
  });
})

.show {
  opacity: 1!important;
}

#paragraph {
  opacity: 0;
}

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.rawgit.com/jschr/textillate/3ca7326c/jquery.textillate.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/d06bb733/jquery.lettering.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<button id="start_animation">start animation</button>
<button id="out_animation">out animation</button>
<button id="replaced_word">replace word</button>
<p id="paragraph">TEST</p>

Answer 1

The thing is, you need to "reset" the plugin for each time you replace the text in the paragraph. Well, you need also to replace the element DOM itself otherwise the plugin will do nothing because it has already a attached DOM element.

$('#start_animation').click(function() {
  $('#sample_text').textillate('in');
  $('#paragraph').textillate('start');
  $('#paragraph').addClass('show');
});

/*-----------------------------------------------*/

$("#out_animation").click(function() {
  $('#sample_text').textillate('out');
  $('#paragraph').textillate('out');
  setTimeout(function() {
    $('#paragraph').removeClass('show');
  }, 1000);
});

var words = ["peter", "michael", "john", "derek", "chris"];

function replacing() {
  $('#paragraph').replaceWith('<p id="paragraph">' + getRandomItem(words) + '</p>');
  init();
}

var btn2 = document.getElementById("replaced_word");

btn2.addEventListener("click", replacing);

function getRandomItem(array) {
  return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}

function init() {
console.log('init');
  $('#paragraph').textillate({
    loop: false,
    autoStart: false,
    in: {
      effect: 'fadeIn',
      shuffle: false,
      delay: 80
    },
    out: {
      effect: 'fadeOut',
      shuffle: false,
      delay: 40,
      reverse: true
    }
  });
}

/*-----------------------------------------------*/

$(function() {
  init();
});

.show {
  opacity: 1!important;
}

#paragraph {
  opacity: 0;
}

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.rawgit.com/jschr/textillate/3ca7326c/jquery.textillate.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/d06bb733/jquery.lettering.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<button id="start_animation">start animation</button>
<button id="out_animation">out animation</button>
<button id="replaced_word">replace word</button>
<p id="paragraph">TEST</p>

BTW, why do you need to manually do all of this staff? It seems that the plugin has functionality of replace the text manually with transition.

Answer 2

What's happening is that when you manipulate the DOM to change the paragraph's text, the textillate events are no longer bound to it.

A simple solution is to use <p id="paragraph"><span id="paragraph_text">TEST</span></p> and only perform DOM manipulation on #paragraph_text

Also, I noticed that $('#sample_text') isn't being used and could be removed.

$('#start_animation').click(function() {
  $('#paragraph').textillate('start');
  $('#paragraph').addClass('show');
});

/*-----------------------------------------------*/

$("#out_animation").click(function() {
  $('#paragraph').textillate('out');
  setTimeout(function() {
    $('#paragraph').removeClass('show');
  }, 1000);
});

var words = ["peter", "michael", "john", "derek", "chris"];

function replacing() {
  document.getElementById('paragraph_text').innerHTML = getRandomItem(words);
}

var btn2 = document.getElementById("replaced_word");

btn2.addEventListener("click", replacing);

function getRandomItem(array) {
  return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}

/*-----------------------------------------------*/

$(function() {
  $('#paragraph').textillate({
    loop: false,
    autoStart: false,
    in: {
      effect: 'fadeIn',
      shuffle: false,
      delay: 80
    },
    out: {
      effect: 'fadeOut',
      shuffle: false,
      delay: 40,
      reverse: true
    }
  });
})

.show {
  opacity: 1!important;
}

#paragraph {
  opacity: 0;
}

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.rawgit.com/jschr/textillate/3ca7326c/jquery.textillate.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/d06bb733/jquery.lettering.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<button id="start_animation">start animation</button>
<button id="out_animation">out animation</button>
<button id="replaced_word">replace word</button>
<p id="paragraph"><span id="paragraph_text">TEST</span></p>