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 a little menu animation with you. The idea is inspired by an effect that can be seen in this video, right at the beginning: a couple of differently sized boxes slide out and fill the screen. We thought this might be a nice idea applied to a menu using CSS Grid.
The demo is kindly sponsored by monday.com: Knowledge Sharing System perfect for your team. If you would like to sponsor one of our demos, find out more here.
We use anime.js for the animations and imagesLoaded for preloading the images.
We’ve created two different styles; have a look at the screenshots and check out the demos.
To open the menu, click on the + info in the bottom left corner.
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 little menu and find it useful!
References and Credits
- Images by Unsplash.com
- anime.js by Julian Garnier
- imagesLoaded by Dave DeSandro
unique thanks a lot
Beautiful Done. Reminds me of this Portfolio: https://www.johnsonbanks.co.uk/
which provides a similar unique effect.
damn, this is godlike. thanks a lot
This is very awesome Mary Lou. Please don’t mind if i use it.
beautiful ?
Great and it works for me (demo 1). Will work on demo 2
good idea,thanks a lot
This is soooo cool. I’ll definitely have to try code this myself.
Damn! Well done!
Impressive! Thank you for sharing!
Hi Mary Lou, I can’t open the menu using the keyboard. I can tab through the rest of the links but the menu is not accessible 🙁
Spectacular! Nice! Thanks!
why your site stylesheet won’t load for me ?
(pure Html !!!)
but your demos works fine (._.)
Awesome! Thanks for sharing
For heaven’s sake…pretty cool.
Super…
how to use external links.
Thx for sharing
Hello again.
How to use external links. I can not