CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chriss
Chriss

Reputation: 323

Wow.js is not working after using page loader

I used wow.js to add some animations to my content to earn some time instead of using my own animations on .appear()

Everything was working great until I had to use some kind of loader that hides the whole wrapper until the window loads. After doing that, the animations are already triggered when I'm scrolling the page. (It's a parallax page). Is this some kind of bug, or did I mess up?

Here's the html and javascript:

<img src="loading.gif" alt="" class="loading"/>
<div class="MainWrapper" style="display: none">

and

$('.MainWrapper').hide();
    new WOW().init();
$(window).load(function() {
    $('.loading').hide(); 
    $('.MainWrapper').show(); 
});

Upvotes: 1

Views: 1543

Answers (1)

Rhyan Foo Kune
Rhyan Foo Kune

Reputation: 21

Wow.js will trigger ALL animations when you switch display to block.. i.e when you change $('.MainWrapper').hide() (display none) to $('.MainWrapper').show() (display block).

To use a "loader" and still keep the functionality of displaying the animation on scroll just initiate WOW.js inside the .load function after you display the page content.

Your js code should look something like this

$('.MainWrapper').hide();
$(window).load(function() {
   $('.loading').hide(); 
   $('.MainWrapper').show();
   new WOW().init();
});

Hope that helps!

Upvotes: 1

Related Questions