1

so trying to using wow.js in conjunction with animate.css

My animate css is working fine and wow.js has been included and activated but it isn't registering me scrolling down to the element so there for isn't animating.

What I've included at the bottom of html before the tag + the animate.css library imported into my main.css

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
  new WOW().init();
</script>

viewport 

  <meta name="viewport" content="width=device-width, initial-scale=1">

main.js - should be irrelevant to wow.js

$(document).ready(function() {

    console.log('Document ready');

    $('.fa-bars').click(function() {
        $('.nav__links').toggleClass('menu-appear');
    });

    $('.nav .nav__links a').click(function() {
        $('.nav__links').toggleClass('menu-appear');
    });

});

animate has been imported into my main.css file.

Totally stumped why this isn't working. Any ideas, test site link is as follows.

http://loved-shrew.cloudvent.net

Sam
  • 47
  • 1
  • 2
  • 11
  • Which are you trying to animate? Seems to work for me where wow is set, though it is very subtle. There are a few options you can play with : `data-delay="1s"` in your element/tag to delay the start of the animation and the offset property so it doesn't start playing until a certain distance scrolled in: `new WOW({offset:40})` – Tank Jun 13 '17 at 18:34
  • Hey wow is only set at the plan and create icons (this is under the 'how we go about doing it title'. It isn't working atall for me in Chrome. I'm just getting a blank empty space, and the animations aren't triggering. – Sam Jun 13 '17 at 18:36
  • I resized my browser window and made it larger - It's not working in higher resolutions but does work in the mobile/smaller resolutions. – Tank Jun 13 '17 at 18:50
  • Yep that's super weird, any idea why? – Sam Jun 13 '17 at 19:02

1 Answers1

1

In your CSS, removing overflow: hidden; seems to get it working. I've only tested by unchecking this property in chrome devtools.

@media (min-width: 1200px)
7690b3e….css:7
html {
    /* overflow: hidden; */
    height: 100%;
}
Tank
  • 1,006
  • 7
  • 17
  • Yep you are correct that fixes it. Do you have idea why that stops wow.js from working? – Sam Jun 13 '17 at 19:17
  • I can only speculate that it interferes with wow.js checking element positions and the current scroll position of the page. With that in mind, overflow:hidden on html and overflow:auto on body stood out to me. Not to mention the scroll bar dissapears when unchecking overflow:auto on the body element. – Tank Jun 13 '17 at 19:28