How to hide animated elements on load?
animate.css, jquery, jquery-waypoints
Solution
You can do it with only CSS.
Let's say you are trying to animate a title. Give your element's class this css:
.title { visibility: hidden; }
and give the animated class (which comes from the animate.css) this css:
.animated { visibility: visible !important; }
When it hits the waypoints view it will add `.animated` per animate.css's code and then it will be visible for the animation.
Problem
I'm using animate.css with waypoints.js in my landing page. I want to animate elements when user scrolls the page. But, the problem is that I need to hide elements before the animation starts(if i don't hide, animate.css hides element first and then animates in, that looks pretty ugly). However, I solved problem by adding two classes in my css but it creates another problem. ``` .visible{ opacity: 1; } .invisible {opacity: 0; } // I added following jquery code $('elem').removeClass('invisible').addClass('visible fadeInUp'); ``` This works good until I add `animation-delay` to an elements. Here is an explanation what I want to achieve. I've elements like this: ``` <ul> <li>element1</li> <li>element2</li> <li>element3</li> </ul> ``` I want to add animation delay to each of the elements, so that they `fadeInUp` after each other with a specified seconds in each of the elements using `animation-delay` property. I can't get this to work. I tried following code without using animation-delay but no success. ``` $('elem').each(function() { // code with delay using timeout setTimeout(function(){ $(this).removeClass('invisible').addClass('...'); }, 100); }); ``` Let me know if my approach is completely wrong? If yes, then can you provide better way to accomplish.