Fullpage JS + Input animation

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.9/jquery.fullPage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.9/jquery.fullPage.min.js"></script>
<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">
      <input type="text" class="form-animate-input">
    </div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

JavaScript

$(document).ready(function(enabled) {
    $('#fullpage').fullpage({
	    onLeave: function (index, nextIndex, direction) {
        if (nextIndex == 2) {
          startAnimation();
        } 
        if (index == 2) {
          stopAnimation();
        }
      }
    });
    
  	var timeOut1;
    var timeOut2;
  	var index;
  	var delay = 70;
    
   	function stopAnimation() {
      clearTimeout(timeOut1);
      clearTimeout(timeOut2);
    }
    
    function startAnimation() {
      $('.form-animate-input').val('');
      text1 = 'Text to animate';
      index = 0;
      while (index < text1.length) {
        timeOut1 = setTimeout(appendLetter, index * delay, text1, index);
        index++;
      }
      timeOut2 = setTimeout(startAnimation, timeOut1 + text1.length * delay + 3000, true);
    }
    
    function appendLetter(text1, index) {
      $('.form-animate-input').val($('.form-animate-input').val() + text1[index]);
    }
});