![How to Design Animated Sliding Page Elements With CSS](https://designshack.net/wp-content/uploads/slider-368x246.png)
CSS / 16 Dec 2013
How to Design Animated Sliding Page Elements With CSS
There’s a recurring trend of using animated page elements in web design at the moment — as you scroll down the page, items will naturally animate into view. These animations only happen one time, and they only begin once the element is within the browser viewport.
I’ve explored this concept a bit using jQuery, along with CSS3 transitions. In a nutshell, this script checks for special classes on the page and uses jQuery to append a new class for transition effects. Those elements which have already animated are then removed from the event handler. And once there are no more elements to animate, the event handler is completely removed until you refresh the page. Take a look at my demo example to see exactly what we’re creating, and follow along!