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 this with opacities. Add a blank class to the div elements that you will want affect. Once the jquery attaches the animated class with waypoints, you can have bring it back to life with opacity: 1.

.to-be-animated {
  opacity: 0;
}

.to-be-animated.animated {
  opacity: 1;
}

Answer 2

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.

Answer 3

Avoid using !important by stacking classes:

.hidden-load {visibility: hidden;}
.hidden-load.animated {visibility: visible;}