Wow.js delay doesn't work on click

Question

I'm trying to make it so whenever I click on a certain element, other elements will appear using wow.js animations with a delay. The animation itself works on click, however, the delay isn't there.

$(function() {
  $('#projects-btn').click(function() {
    $('.circle').addClass('wow fadeInUp animated');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<h1 id="projects-btn"></h1>
<div id="selectors">
  <div class="circle" data-wow-delay="2s"></div>
  <div class="circle" data-wow-delay="3s"></div>
  <div class="circle" data-wow-delay="4s"></div>
  <div class="circle" data-wow-delay="5s"></div>
  <div class="circle" data-wow-delay="6s"></div>
</div>

I've tried removing the class name "circle" to see if that had any effect. Same thing though, animation worked, delay didn't. — Kareem Sabri, Sep 25 '17 at 19:10

score 0 · Answer 1 · answered Sep 27 '17 at 00:57

wow.js gets a list of the elements it is working on during its initialisation process. You are adding the classes after it has run so you would have to re-initialise if you wanted it to run over those elements correctly. You probably don't want to re-initialise as this would affect other elements on your page.

You can however, work around this using the live customised setting. If this is set to true, WOW will look for new WOW elements on the page. You will need to create and add your elements on the fly in order to use this option. e.g.

Set live custom setting:

  var myWow = new WOW({live:true});
    myWow.init();

Add the elements on the fly:

<script>
$(function() {
  $('#projects-btn').click(function() {
    $('#selectors').append('<div class="circle wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="1s">1</div>')
    $('#selectors').append('<div class="circle wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="2s">2</div>')
    $('#selectors').append('<div class="circle wow fadeInUp animated" data-wow-duration="1s" data-wow-delay="3s">3</div>')
  });
});
</script>

In the html body:

<h1 id="projects-btn">btn</h1>
<div id="selectors"></div>

This worked! Thank you! Only issue is I can't reverse the animation if I want to click another button such as a "home" button. I tried using .toggleClass to a fadeOutDown but that didn't work. — Kareem Sabri, Sep 27 '17 at 12:29

Wow.js delay doesn't work on click

1 Answers1