Paper folding animation effect is a new paradigm in web design. It works with touch devices like swiping to certain direction to reveal content underneath by “folding” the current view. It’s really a fancy effect and definitely giving its users a cool experience. Here in this post I am going to give you few resources that will surely inspire you to achieve paper folding effect in web development.

Folding HTML View

This effect is created entirely with HTML, CSS, and JavaScript, so they are great for mobile web or PhoneGap applications.



Oridomi is an independent javascript plugin that folds up the DOM like paper. With small file size and optional jQuery support, it folds images, web fonts, animated gifs, almost any DOM element.



Makisu is a javascript plugin for list. You can folding a list up or down. We’re not sure how practical is it to be used in web design, but it does look very impressive.

Paperfold CSS

This could be the earliest working example of paper folding effect. Showcased in Mozilla Developer Network, this plugin takes a DOM element, slices it into parts and arranges them like a folded paper in 3D space.


3D Thumbnail Hover Effect

It is a impressive manipulation of CSS to generate 3D thumbnail hover effects. It contains 4 types of hover effects and explained in the tutorial. If you want to learn how to make one, you should check this out.

[vfb id=1]