Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Please continue scrolling down the page to see the animations...

Lets show off the different animations!

Lets show off the different animations! This is visible 400 pixels too soon, but it won't animate until you're at the right place because of the custom offset specified in settings.custom, coupling this with a fade-in class could be used to avoid this being seen...

Lets show off the different animations! Just like the slide-in-from-above element, this is visible loewr on the page too, but will animate at the right time due to the similar properties in settings.custom.

Lets show off the different animations! No calculations are needed for horizontal movement, but you might want to apply overflow hidden on the container to avoid seeing the element in the wrong place...

Lets show off the different animations!

List example with multiple animations

This page only contains very basic examples, but this is intended more as a basic way to enable you to control your CSS animations than a ready to use plugin, although it will work as such.

Please don't over-use this effect, it can be useful to draw attention to things, but could easily become frustrating for your visitors...


You can download a .zip, or a .tar.gz, or the source files directly (.css, .js, .min.js). This is free for you to do as you wish with.

The .min.js linked above includes the settings for the slide-in-from-below and slide-in-from-above classes, if you want a version without this, there's a .js and .min.js file.