Expanding Grid Menu
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.
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
Expanding Grid Menu was written by Mary Lou and published on Codrops.
LEAVE A REPLY
You must be logged in to post a comment.