wow items aren't animated/shown in DOM elements hidden at pageload

[qgates]

I have a situation where my page has hidden content in the DOM (display:none) which is then revealed with user actions on buttons and links using jQuery functions like slideDown().

The problem is wow doesn't detect this and won't animate/show items until the scrollbar is moved, despite the fact that they are already visible as blank placeholders on the screen. Any chance this could be fixed?

[qgates]

I implemented a workaround for this, a small behaviour hack which doesn't modify wow.js itself. We first need access to the wow instance from js, so load wow in this way:

<script>
  var wow = new WOW();
  wow.init();
</script>

Then, in the JS responsible for revealing hidden elements, the slideDown() closure looks like this:

element.slideDown(300, function() {
  if (typeof wow !== 'undefined') {
    wow.scrolled = true;
    wow.scrollCallback();
  }
});

Not ideal but certainly workable. It'd be nice to see handling of this kind of situation baked in to wow, since at the moment the behaviour doesn't even fall back gracefully: eg. when a div is unhidden with display:block, placeholders for wow elements appear but the elements themselves don't.

[attilaolah]

This isn't that bad, but wow.scrolled and wow.scrollCallback() certainly aren't APIs. Can't you make this work by calling wow.sync() instead?

[attilaolah]

The problem is wow doesn't detect this […]

What browser are you using? WOW.js tries to detect DOM mutations, if you're revealing content by mutating the DOM (and how else could you), WOW should detect it.

Perhaps this is a bug, could you please point to a page where this is not working? (Or put together a quick example maybe.)

[qgates]

Can't you make this work by calling wow.sync() instead?

I tried wow.sync() before my workaround above but that didn't fix the problem.

What browser are you using? WOW.js tries to detect DOM mutations, if you're revealing content by mutating the DOM (and how else could you), WOW should detect it.

Perhaps this is a bug, could you please point to a page where this is not working? (Or put together a quick example maybe.)

Chrome and Firefox, latest. Not easy to show the page with the problem at the moment as its on a local server, but when I have a little time I'll knock together a simple fiddle to demo.

It seems that wow is setting visibility: hidden on the img elements while they're contained within the hidden div. When the div is revealed, the images remain hidden, so something is up with the processing that's fired as a result of the mutation observer.

[attilaolah]

It seems that wow is setting visibility: hidden on the img elements while they're contained within the hidden div. When the div is revealed, the images remain hidden, so something is up with the processing that's fired as a result of the mutation observer.

Oh, I see, that makes this a bug indeed. I'll look into that, thanks for reporting.

[qgates]

More information

I can't reproduce this problem in a simple case, as demonstrated by this codepen. Everything works just as expected.

So I've put the page I'm working on up for you guys to look at:

http://tmp.qgates.com/wowbug.html

Load up the page, scroll down so that the "Detailed Information" button is somewhere near the page center or higher, and click it. First time around, the thumbnails get revealed OK. Refresh the page and, without scrolling, hit the "Detailed information" button again. The gfx remain hidden until you scroll manually.

I've disabled my JS "Detailed Info" button handler on there for clarity as it doesn't affect the problem. If you want to see it with my JS, which essentially adds in some jQuery slidedown sugar, together with an intelligent scrolling algo, there's another version which swaps out lines 127 and 128 of the html. It doesn't really affect the problem; I left it out to show that its not some knock on from my JS.

I'm confused by why it works first time in. I thought it was my scrolling algo forcing a scroll event to wow, but when I tried it without my scroller (ie. just unhiding the div), I saw the same behaviour: first time it works, subsequent times no.

Apologies in advance if I've missed something stupid ;)

[Chris-Reedy]

I have the same sort of problem. I have a page of boxes that appear with wow. Each box is a trigger to a modal. Everything works great. But if I were to scroll down the page, then refresh the page...wow animates only the viewport boxes. This is to be expected since the other boxes are not in the viewport and thus won't be animated into visibility by wow. If I click on any box after page refresh, they trigger modals that appear with blank content. I have to scroll up to bring all the boxes into visibility before I can get the modals to appear with content.

[Chris-Reedy]

Any update on this bug? :)

[ghost]

I have the same problem too. I guess there is a limit on elements. Better solution suggested on other issue. https://scrollrevealjs.org/

[jitendersandhu]

+1 I am also facing the same issue. When switching views in ui-router, after scrolling down in the view, the page loads with div hidden (visibility: hidden) added to it. By removing wow class from the wrapper element, fixes the issue. But is there a better solution available. Any help will be much appreciated.

Here is the HTML i am using:

<div class="main-wrapper wow fadeIn" data-wow-delay="0.3s">

fixed with this -
<div class="main-wrapper fadeIn" data-wow-delay="0.3s">

using this to initialize wow -

var wow = new WOW({
animateClass: 'animated',
offset: 100,
callback: function(box) {
console.log(box.tagName);
}
});

    wow.init();

Thanks!

[autvincere]

thanks guys, work perfectly :) .

[sera2007]

You just need to do "new WOW().init();" every time, when you show the hidden content.

[bartoszt]

I had similar issue and I solved that removing
body, html { overflow-x:hidden; }

from CSS file 🥇

[NickyBlaxx]

Hi All,

FINALLY!!
I had the same issue, i think: When i loaded the page, my elements would appear without having to scroll, but when i clicked a Filter-Button (Category), i would have to scroll in order for the elements to show. I think i may have tried every option that has been posted on many sites and nothing seemed to work for me..., the exception, that if one or two did work, it caused something else to suffer (slightly)... I found this code that someone posted, which seemed to allow me to keep my Code as is, and when i click any Filter-Button (Category), they all load and animate using
wow FadeInUp. Works great! What a relief. So anyway, if anyone is still looking for a solution, this is all i ended up adding in CSS to fix this silly issue:

.wow {
visibility: visible !important;
}

[iamrobert]

A simple workaround is on browser refresh scroll to top:

//SCROLL TO TOP ON PAGE REFRESH
$(window).on('beforeunload', function() {
    $(window).scrollTop(0); 
});

[phortx]

+1

I've the problem with Ember Routing. Some time ago it helped to call new WOW().init() in the didTransition event of the router, but this doesn't work anymore.

[supriyaayare]

Hi please help me with Wow.js plugin.
i am using Wow.js with http://www.jqueryscript.net/layout/App-Style-One-Page-Scroll-Plugin-With-jQuery-AppLikeOnePage-js.html this plugin.
After including this plugin..when i load page..first i see the wow effects on second section of page after that page got scroll at top first section of page....but when i scroll again wow.js not working on scroll.