From our sponsor: Agent.ai Builder is now open—no waitlist. Explore 12+ foundation models, no-code to full-code. Free!
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? Check out our Collective and stay in the loop.
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.