WOW elements flash on screen briefly before animation

[fensterbaby]

My WOW elements flash on screen then immediately disappear and then animate in properly.

http://alaskawebcrafters.com/content-management-systems

jquery 1.11.3 Chrome Version 48.0.2564.48

Any ideas? Thanks!

Greg

[cosecantt]

Try adding visibility:hidden style property for that element. Example:

<div class="wow fadeIn" data-wow-delay=".1s" style="visibility:hidden">
     content
</div>

This worked for me for fadeIn. I have not tried for other animations yet.

[carlos-kryzalis]

Hi, the visibility didn't work for me, i used the css opacity : 0 in the wow class and used the callback on the end of the animation (https://github.com/matthieua/WOW/issues/230) to put opacity : 1. and worked.

[dandanidanielle]

For me, using "visibility:hidden" did not work for fixing the animation flash on the page load, but using @carlos-kryzalis' solution did. The only issue now is that my animated element disappears (sets back to opacity: 0) once the animation is complete. Any ideas on how to fix that?

[cosecantt]

What animation did not work? It worked for fadeIn at least for me as I posted the code above. Will you post the animation you have an issue? Also it is better to check animation.css file to figure out what animation it uses. In some cases an animation uses opacity property others visibility. Try both.

[carlos-kryzalis]

thats the code that worked for me:

<style> .wow{ opacity: 0; } </style> <script> function afterReveal( el ) { el.addEventListener('animationend', function( event ) { $('.wow').each(function(){ $(this).css('opacity',1); }); }); } new WOW({ callback: afterReveal }).init() </script>

[dandanidanielle]

Thanks for posting this!

[MohammadDayeh]

using .wow { visibility: hidden; } worked for me

[dystopiandev]

Improved upon solution provided by @carlos-kryzalis

<style> .wow{ opacity: 0; } </style>
<script> function afterReveal( el ) { el.addEventListener('animationstart', function( event ) { $('.wow').each(function(){ $(this).css('opacity',1); }); }); } new WOW({ callback: afterReveal }).init() </script>

[michael-feh]

.wow { visibility: hidden; } solved all my problems of flashing before fadeins. just having some conscerns on whether google still registers the content. search console looks good so far...

any experience with this?