jquery - How to hide animated elements on load? -

i'm using animate.css waypoints.js in landing page. want animate elements when user scrolls page. but, problem need hide elements before animation starts(if don't hide, animate.css hides element first , animates in, looks pretty ugly).

however, solved problem adding 2 classes in css creates problem.

.visible{ opacity: 1; } .invisible {opacity: 0; } // added following jquery code  $('elem').removeclass('invisible').addclass('visible fadeinup'); 

this works until add animation-delay elements. here explanation want achieve. i've elements this:

<ul>  <li>element1</li>  <li>element2</li>  <li>element3</li> </ul> 

i want add animation delay each of elements, fadeinup after each other specified seconds in each of elements using animation-delay property. can't work. tried following code without using animation-delay no success.

$('elem').each(function() {   // code delay using timeout   settimeout(function(){    $(this).removeclass('invisible').addclass('...');   }, 100); }); 

let me know if approach wrong? if yes, can provide better way accomplish.

you can css.

let's trying animate title. give element's class css:

.title { visibility: hidden; } 

and give animated class (which comes animate.css) css:

.animated { visibility: visible !important; } 

when hits waypoints view add .animated per animate.css's code , visible animation.