Getting CSS Animations to Trigger at the Right Time

When Karl Schellenberg redeveloped his new website, he decided to use CSS3 animations to provide an impressive and interactive site experience. However, he struggled to time the animations to trigger at the right time.  Because animated elements below the fold (depending on the screen resolution) animate on page load, some animations had already played before the user had chance to scroll to them.

To prevent this, Karl Schellenberg delays the animations until the user can see them. The animations trigger as the user scrolls down and the elements come into view, which creates a staggered effect. To do this he used specific classes for CSS3 Transitions and some JavaScript to trigger the correct elements during scrolling. This is supported on any modern browser with CSS3 Transitions support. First, include all necessary JavaScript libraries, such as Modernizr, jQuery and a custom jQuery Appear script. He uses Modernizr to test if the browser supports CSS3 Transitions. If so, the script executes. If not, the page loads as normal without animations taking place.