Wow.js animation hiding element without padding

Question

I installed WOW.js (master version). It works as attended on any content but the logo.

When I apply any transition to my site logo (inside the navbar, at the top of the viewport), I have this behaviour:

As is, It is not working. Logo with wow class is not visible, I get this HTML after loading the page.

<span class="t2g-logo animated wow fadeInDown" style="visibility: hidden; animation-name: none;">2</span>
When I put a padding-top >= 0.4 em, it works as expected and I get this HTML after loading the page.

<span id="t2g-logo-2" class="t2g-logo wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">2</span>

My markup is quite simple:

<a class="navbar-brand" href="/">
      <span class="t2g-logo">Trip</span>
      <span class="t2g-logo wow fadeInDown">2</span>
      <span class="t2g-logo wow fadeIn">Go</span>
</a>

And the WOW initialization is inside \ like this:

<script>
    new WOW().init();
</script>

Any help is appreciated!

I created a fiddle to reproduce it: http://jsfiddle.net/andreav/9n74Le1t/

Try increasing padding-top to 0.4em and it will start working.

Wow.js animation hiding element without padding

0 Answers0