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...
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();
});
1 Answer
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!
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
