Display CSS Animations When In Browser Viewport

CSS Animations can be easily applied to elements in HTML and viewed in the browser, but when the animation is lower down on the page it may have animated already before the user has scrolled to it.

Here's where Waypoints can solve the problem. (This example is done using WordPress). Waypoints allows you to run a script when it reaches an element on the page.

Set Up Javascript and Waypoints

Download the latest waypoints and link to the jquery.waypoints.min.js and set up a Javascript firing script.

So the waypoints fire script and waypoints as well as the Animate.CSS file are all loaded.

Fire Up Waypoints

The firing script adds the waypoint to the CSS selector used and then a function is called from that, that applies the two needed classes to fire the animated CSS. Finally, the offset amount determines when to start the animation by the percentage the element is from the top of the browser when the page is scrolled.