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;
}