matthieua/WOW

Flash on initial load then animates

contempoinc opened this issue · 16 comments

contempoinc commented

Is there a way to prevent the flash on initial load as you can see here:

http://wp.contempographicdesign.com/wp_hyperion/?cat=2

I know its caused by the dom not being loaded then it hits the JS and loads the animation, but is there a way around this? Noticed your demo site doesn't have that issue.

Cheers,

Chris

attilaolah commented

You can add this to your CSS:

.wow {
  visibility: hidden;
}

WOW will then toggle it to visible when starting the animation.

  • 👍36
  • 🎉4
  • ❤️6
  • 🚀1
attilaolah commented

I think this might be worth mentioning in the readme…

  • 👍8
  • ❤️2
contempoinc commented

Awesome, thanks for the quick response! Worked perfectly!

tomasdev commented

@attilaolah what if I want the opposite? Something like .wow not to be animated on DOMContentLoaded if it's visible. This means along the lines "animate only when content is revealed and not already visible"

Brought to me by http://stackoverflow.com/questions/23531064/wow-js-happens-on-page-load-and-not-on-scroll

attilaolah commented

@tomasdev you can't do that right now… maybe open a new issue if you want that.

commentluv commented

adding .wow {
visibility: hidden;
}

worked for me! I was searching for ages on how to prevent the flash on page load.

thanks!

vviikk commented

This is an extremely crucial issue that needs to be mentioned in the documentation.

  • 👍3
adammoisa commented

@attilaolah You're a winner. You just fixed 8 of my projects.

MJones68 commented

adding visibility: hidden; Worked on desktops but it will not display at all on a mobile device for me.

contempoinc commented
MJones68 commented

It still doesn't show on a mobile device, thanks for the suggestion though!

ashleydance commented

To have this work on mobile wrap it in a media query like:

@media( min-width: 768px ) { .wow { visibility: hidden; } }

n-nidhu commented

tried this and also callback but not working... Please have a look @attilaolah
http://dev.webglanz.com/

oelbaga commented

OMG I was thinking of this for so long. I finally searched it and landed here.

Perfect! even from 4 years ago

mattsonnhalter commented

I got here from this stack overflow post. https://stackoverflow.com/questions/23531064/wow-js-happens-on-page-load-and-not-on-scroll

Glad there is a solution!

sam-ux commented

awesome
thank you very much for the suggestion.
you save my time.