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:
We hope you enjoy this tiny set and find it inspiring!
References and Credits
- Anime.js by Julian Garnier
- Charming.js by Yuan Qing
- Images designs by Freepik.com: People Avantars, Set of three field banners with trees, Beautiful hand drawn landscapes nature banners, Flat cityscape pack, Set of banners with mountains
- Folder user icon by Madebyoliver, Ineraction Asset
- Planet icon by Designerz Base
- Padlock icon by Freepik
- Cloud icon by Gregor Cresnar
Folder Preview Ideas was written by Mary Lou and published on Codrops.
LEAVE A REPLY
You must be logged in to post a comment.