CODEWITHSUNDEEP
javascripthtmlcsswow.js
John Doe
John Doe

Reputation: 305

Why is WOW.js not working and leaving invisible elements behind?

I have a website in my local pc and linked it to wow.min.js. (I dont know whether or not I should download the entire library or just that file; I did both ways but still no luck.) I tried:

With entire library downloaded:

<script src="WOW-master/dist/wow.min.js"></script>

With only this file in same dir:

<script src="WOW-master/dist/wow.min.js"></script>

And with this CDN:

<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js">

No luck with any of those ^ With all of those variations, I used this as the WOW Integration: 

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

This would be the target element:

<i class="fa fa-pencil-square-o fa-3x wow slideInLeft" id="icons" aria-hidden="true"></i>

I know animate.css is working perfectly because if I write the above code like this: 

<i class="fa fa-pencil-square-o fa-3x animate infinite slideInLeft" id="icons" aria-hidden="true"></i>

I see the animation working, infinitely.

Instead of triggering when scrolled to, it just leaves the element with no visibility (visibility: hidden?) and you can't see the targeted element at all.

What could be the problem?

I downloaded all these files from the official gitHub page for WOW

A live link for the website is here: http://stackoverflowproblems.site88.net/index.html

Bad site/host and no photos as they were too large (>1MB) for the free host I used. Also, the javascript is not working as soon as I uploaded it. but thats not the focus of this question. The code is still there so hopefully thats good enough. Thanks!

Upvotes: 2

Views: 2659

Answers (2)

Zac Jayme
Zac Jayme

Reputation: 1

Don't add overflow-x: hidden; on your CSS or style. It won't work if you have overflow-x: hidden; on your styles.

Upvotes: 0

Badr Errami
Badr Errami

Reputation: 134

Iv'e had the same problem as you did, until i went back to my css and noticed i gave to the body tag a hidden overflow-x property :

body, html {
    /* Some stuff here */
    overflow-x: hidden;
}

Once i removed it, this problem was resolved and the animations started working again, In fact, this is a known issue in the wowJS library. so in to resolve it, just remove the overflow-x hidden.

Upvotes: 1

Related Questions