Menu to Grid Layout Animation

A simple layout animation where the thumbnails of a menu row animate to their position in a content preview grid.

Today I’d like to share a little layout animation with you. It’s inspired by the design of Sturdy’s client showcase. Initially, we have a row based menu layout which shows some thumbnails on hover. Using the GSAP’s flip plugin, we animate the row to a content preview with larger images which fly to their position in a grid.

Here’s the initial view:

When hovering, some images appear on the right side. Once we click, the thumbnails animate to form a grid and some additional grid items appear:

Here is how it all comes together:

I hope you enjoy this little animation and find it useful!

Tagged with:

Manoela Ilic

Manoela Ilic is the founder and owner of Codrops. With her background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends in the community. She enjoys gardening and learning about off-grid living, as well as staying up-to-date on the latest industry trends and technologies.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!