This content originally appeared on Codrops and was authored by Mary Lou
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!
This content originally appeared on Codrops and was authored by Mary Lou
Mary Lou | Sciencx (2022-09-19T12:59:55+00:00) Menu to Grid Layout Animation. Retrieved from https://www.scien.cx/2022/09/19/menu-to-grid-layout-animation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.