21

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?

stevenspiel
  • 5,775
  • 13
  • 60
  • 89

9 Answers9

22

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.

G.Mart
  • 596
  • 4
  • 17
  • 2
    this was what worked for me in my situation. On page load the images would appear briefly, then get hidden when once the page finally loaded. Thanks – jdwallace12 May 22 '15 at 16:57
  • I noticed I was having this issue as well and it makes the page look amateur'ish from an otherwise fantastic library. Solution above worked for me. – mattsonnhalter Dec 05 '18 at 20:04
9

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.

DesignofKA
  • 101
  • 1
  • 2
2

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

olio
  • 21
  • 2
1

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>
Rubén Jiménez
  • 55
  • 8
1

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.

grimabe
  • 611
  • 1
  • 7
  • 5
1

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();
});
Ouatataz
  • 185
  • 3
  • 12
0

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.

Attila O.
  • 15,659
  • 11
  • 54
  • 84
0

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

<!DOCTYPE html>

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

Community
  • 1
  • 1
Akshat Kedia
  • 11
  • 4
0

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

 -webkit-overflow-scrolling: touch;

Hopefully this was helpful.

Roger
  • 597
  • 9
  • 32