Hiding Elements after the DOM is loaded...

Two ways you could do this (might need to play around with it to see which result you like best).

You could in the document.ready function just call the element.hide(); That would hide the element as soon as the document has loaded (but I am not sure if it would flash up first you would have to test that). The other theory I have that might delay it more is to do with classes. In your css you could have a class called .hidden{ display: none; }

And then on the document.ready(); you would have to use .addClass("hidden"); to the element you want hidden.

Hope this helps

So based on the link you sent over, there are couple things contributing to the flashing. Part of it has to do with load optimization and limiting the amount of requests being made. A lot of these js and css files could be bundled into a single file and minimized. If you checkout the screen shot of the network timeline, you can see there is about a half second before wow js loads (even though all the other files that load are tiny). Minimizing the amount of request

howistheworldfeeling Screen Shot 2016-08-12 at 8.07.48 AM.png

I noticed in your html tag you have the "no-js" class even after the page is loaded. This is usually used in conjunction with Modernizr so that you can apply separate styles to the page when JS isn't enabled. The trick here being that you need Modernizr (or some other js) to toggle the "no-js" class to "js" when js is enabled.

So piggybacking off of Andrew Taylors answer, once you are able to set styles based on js being enabled you could create a css rule for hiding all wow js enabled elements. This way its just pure css and your not having to modify the dom once the page has loaded. This way you are making the elements hidden by default only when JS is enabled. If js is disabled, your element will display as intended by default.

.js wow {
  visibility: hidden;
}