2

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!

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
John Doe
  • 305
  • 1
  • 2
  • 10
  • Can you provide a live link? or create a new **BIN** at [**JSBIN**](http://jsbin.com) – Umair Shah Aug 02 '16 at 02:12
  • @UmairShahYousafzai Sure. Here: http://stackoverflowproblems.site88.net/index.html Its not the best site/host and most of the photos were too big to upload. But the code is there so. – John Doe Aug 02 '16 at 02:27
  • @UmairShahYousafzai Any Luck? By the way, whats supposed to animate in are the logos about "Lorem Ipsum" – John Doe Aug 02 '16 at 02:53

2 Answers2

1

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.

Badr Errami
  • 136
  • 3
0

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

Pingolin
  • 3,161
  • 6
  • 25
  • 40
Zac Jayme
  • 1