What about wow when JS fails?

[jgugelot]

To prevent elements from 1st showing, then disappearing and then appearing again (animation) when using wow, I added the CSs line: .wow { visibility:none;}

However, this causes elements to stay hidden when JS fails or disabled in browser. For that, I created this little

<!-- wow backup -->
<noscript><style>.wow {visibility: initial;}</style></noscript>
<script>window.onload=function(){elem = document.querySelector('.wow');style = getComputedStyle(elem);if (style.visibility=='hidden') {style = document.createElement('style');document.head.appendChild(style);style.sheet.insertRule('.wow { visibility:initial;}');}}</script>

[hidegh]

Trying to solve similar issue with AOS.js (actually dopping the use of it).

We need an wow-initialized class. Actually we can request this feature, but until then I'd suggest this solution:

• WOW.init()
• and then, if the code above does not break, just use document.querySelectorAll(".wow") to append a ".wow-initialized" class to all animated container
• and then just use CSS: .wow { visibility: visible; /ev. opacity might be required/ } and .wow.wow-initialized: { visibilty: none; }

[hidegh]

FEATURE REQUEST: ❗we require a new option: initializedClassName that should be set to all .wow containers and to all newly detected containers. In reg. to this feature, we should also alter the CSS of the .wow - only .wow.wow-initialized should have the visibility: hidden set.

In case WOW.js load fails, this class then would not be appended, which would result in the element still being shown as intended in case no animation would be added.