How to hide animated elements on load?

Question

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 a

Answer 1

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.