CODEWITHSUNDEEP
javascriptjqueryfullpage.js
spitfire378
spitfire378

Reputation: 89

Fullpage JS and input infinite animation

I'm using Fullpage JS and i'm trying to enable an infinite animation on a specific section.

HTML

<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>

JS

$(document).ready(function(enabled) {
$('#fullpage').fullpage({
    onLeave: function (index, nextIndex, direction) {
    if (nextIndex == 2) {
      animateForm(true);
    } else {
      animateForm(false);
    }
  }
});

var timeOut;
var index;
var delay = 70;

function animateForm() {
  text1 = 'Text to animate';
  index = 0;
  $('.form-animate-input').val('');
  clearTimeout(timeOut);

  if (!enabled) {
    return false;
  }

  while (index < text1.length) {
    timeOut = setTimeout(appendLetter, index * delay, text1, index);
    index++;
  }
  setTimeout(animateForm, timeOut + text1.length * delay + 3000, true);
}

function appendLetter(text1, index) {
  $('.form-animate-input').val($('.form-animate-input').val() + text1[index]);
}

});

The problem is, when i quit this section and come back to it, there is a text merging issue, any idea?

Working JSFIDDLE

Upvotes: 1

Views: 100

Answers (1)

Bree
Bree

Reputation: 21

You've cleared the timeout that sets the individual letter animation, but not the timeout that restarts the animateForm.

i'd also break out the start and stop into separate functions for when you enter and leave the slide.

JS

$(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]);
 }
});

Upvotes: 1

Related Questions