Element visible before animation delay is finished.

[lsemenenko]

I'm having an issue where the element is displayed instantly instead of adhering to the delay time.

Basically I have a h1 element with a 2 second duration and 2 second delay. As soon as the element is in view the visibility class changes to visible. Then, 2 seconds later it plays the animation. From what I understand this element should be hidden during the 2 second delay, then visible once the animation starts.

[roryashfordbentley]

This seems to be to do with the 'offset' property. In your javascript initialisation try removing offset: 100 (or whatever value it is set at).

[maziarzamani]

I have the same problem. All the elements flash for a short moment in Firefox 37 and Chrome 42, whereafter the animation begins. Even with a delay i experience this problem. Only Safari seems to not do this. I have no offset.

[remcovog]

The problem is: first all the element loads on the page, then after the content has been loaded, the animation starts. A simple solution to prevent the flashing, is to give the element a style="visibility: hidden", so onload the element is hidden, then WOW kicks in, and make the elements visible again.

For example:

< H1 class="wow fadeInDown" style="visibility: hidden">FOO< /H1 >

The downside: javascript disabled browsers might not display anything then, and this might affect SEO / google indexing, because you hide the content at pageload. Matt Cutts (google) says that they might index hidden elements, unless it's used for spam or may be suspicious with custom js scripts... See also: https://www.youtube.com/watch?v=UpK1VGJN4XY

Does anybody have experience with indexing of hidden content? / or a better solution?

[petermikitsh]

Pretty sure this might be causing SEO issues for me.

[BC17]

Same issue here on firefox with 3 element inline block, with different data-wow-delay, the third is still visible. visibility hidden not working

[BC17]

Ok I fixed it by removing the data-wow-delay="2000ms" and put an inline style animation-delay: 2000ms;

[cyn3rgy]

I had the same problem. I added wow tada classes to a parent div and that stopped it showing up before the animation.... not sure why though.

[Shuhratt]

the problem is still not solved if you set the delay attribute, the block immediately becomes visible , then blinks and the animation is performed

[steveDL]

Yes I am experiencing this issue also and need to use a delay. Is there a fix?

[veraLX]

Hello，我是林昕，我已收到来信~