I am looking to create a dynamic effect where three words slide in and out individually. The first word should slide in and out, then the second word, and so on.
How can I make this happen? Here's what I've tried:
HTML:
<p class="fp-animated-subheadline animated"></p>
JS:
var texts = ['Bloggers', 'Entrepreneurs', 'Companies'];
(function () {
texts.forEach(animateFunction);
})();
function animateFunction(item, index) {
$('.fp-animated-subheadline').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$('.fp-animated-subheadline').html(item);
$('.fp-animated-subheadline').delay(200).removeClass('fadeInDown');
$('.fp-animated-subheadline').addClass('fadeOutDown');
});
}