wow.js happens on page load and not on scroll

I'm using wow.js, and it works fine, except the animations all happen immediately after the page load, and not when they are scrolled to. I followed the docs, but can't figure it out.

There are no JS errors on the page. I included both animate.min.css and wow.js

in the body:

<img src="images/philosophy.png" alt="Philosophy" id="philosophy-img" class="icon wow bounceInUp">

and in the footer:

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

So how can use wow.js to get the animations to happen when scrolling to a particular div?

Answers:

Answer

Here's the solution I found via a closed Github Issue: you can add this to your CSS:

.wow {
   visibility: hidden;
}

WOW will then toggle it to visible when starting the animation.

Answer

Late response however this still may help others.

If WOW.js is still not working after adding the latest version or adding <!DOCTYPE html> the problem may be due to a conflict in the scroll (or more specifically the viewport).

In my case, the problem was caused within my CSS when using the following:

html, body {height:100%; width:100%; overflow:hidden}

By removing the height and width properly, I was able to solve the problem as Wow.js was then able to notice when the element came into the viewport and change the elements visibility.

Answer

Had same problem. was using class="wow bounceInUp"

Then I tried class="wow bounceInUp animated"

And it worked

EDIT: in the end, it didn't work. It worked at first but then stopped. Even bigger mystery :S

Answer

I had a similar problem. I had just forgotten to add

<!DOCTYPE html>

The answer here helped - wow.js only works when scrolling up

Answer

I came across this same problem and I just figured it out. The issue was that the <script> in the footer is incomplete, or at least it didn't work to me.

Whoever's got this problem give a try to this code instead, just before the </body> tag:

<script>
wow = new WOW( {
    boxClass:     'wow',
    animateClass: 'animated',
    offset:       100
    }
);

wow.init();
</script>
Answer

I had a similar problem today, because I was using a fixed navigation bar width a height of 160px the content was loaded before I could see it.

I solved it by adding an offset in the WOW initialization :

new WOW({offset: 160 }).init()

Hope it could help.

Answer

For bouncing on the answer proposed by DesignofKA, I had the same issue due to fixed height property in a wrapping div.

I simply init wow during window.onload event to solve the wow problem.

My code is:

$(window).load(function() {
    var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 0,
        mobile: true,
        live: true
    });
    wow.init();
});
Answer

It would be helpful if I knew the browser you are using and the WOW.js version.

Also, please give the latest version a try, we've done some changes to address issues with Firefox which might fix your problem too. Particularly, in 0.1.9.

If your problem persists, please report the bug, and try to provide an example page and tell us which browser are you using.

Answer

In accordance with @DesignofKA post. For me it conflicted wit this line of code:

 -webkit-overflow-scrolling: touch;

Hopefully this was helpful.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.