Expanding Grid Menu

Original Source: http://feedproxy.google.com/~r/tympanus/~3/jN2zzrzblic/

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.

Attention: Modern CSS properties at work, please view in an updated browser!

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.