Folder Preview Ideas

Today we’d like to share some fun little hover effects with you. The idea is to show a preview animation for folders. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered folder. We are using anime.js to power the animations.

Attention: We are using a couple of modern CSS properties so this demo only works in the latest browsers.

Have a look at some of the final states of the hover animations:

FolderPreviewIdeas_01

FolderPreviewIdeas_02

FolderPreviewIdeas_03

We hope you enjoy this tiny set and find it inspiring!

References and Credits

Folder Preview Ideas was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants