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.
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
Previous:
Infinite Tubes with Three.js
Infinite Tubes with Three.js
I know you have magic box. Form there you provide us one by one…. :)
many indian folder names
They are name of gods :)
never heard of ardra :), Other names are pretty usual :D
Very beautiful design and effect.
Clean and colorful graphics.
Funny transitions.
All very interesting
Indian name :)
i like it .
Seems broke. Browsers are all up to date. If I need canary you should make that clear.
@Chris You should take a long walk off a short cliff.