Folder Preview Ideas

Some ideas for previewing or just playing with folders on hover. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview for what's inside.
FolderPreviewIdeas_Featured

From our sponsor: Try Mailchimp today.

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

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 15

Comments are closed.
  1. I know you have magic box. Form there you provide us one by one…. 🙂

  2. Seems broke. Browsers are all up to date. If I need canary you should make that clear.

  3. this is nice … is it possible to use this as an option button, example … when i click on the folder, the popups appear , with their own commands…in the demo, everytime i try to click on the popup animations, they dissapear.