Design

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.


From our sponsor: Sell access to courses, classes, and community with Squarespace.

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!

Source link

Show More

admin

Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button