Karl Schellenberg demonstrates how to stagger full-site animations with CSS3 and JavaScript through page scrolling

When we redeveloped our new website, we decided to use CSS3 animations to provide an impressive and interactive site experience. However, we 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, we delay 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 we used specific classes for CSS3 Transitions and some JavaScript to trigger the correct elements during scrolling.

MORE:  Getting CSS animations to trigger at the right time