From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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
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 😀
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.
Mary Lou, I love your work.
so hard to use
Great post!
Love it!
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.