New
New
New
Component
Grid Morphs Into Preview in Framer
This is a Grid Morphs Into Preview animation recreated in Framer from Gwen Bogaert’s grid to preview demo. Feel free to remix the project, explore how the masking and variant transitions are set up, or copy the component into your own work.
About the resource
To create the grid morphs into preview interaction, I started by building an image component with a hover variant. Then I arranged eight of these components in a grid layout, four on the left side and four on the right. This forms the default state.
For each image, I created a preview setup by masking the same image into four separate frames and placing those four frames on both sides of the grid. In the next variant, these four frames move and merge into the centre, forming a single large preview image. Each preview image uses the original asset at 200% width and height, masked to match the component size for a clean join.
When hovering over any of the left-side images, the four frames on the right animate together to form the larger preview. The opacity of the original grid images fades as the variant shifts from default to hover.
I also added each image’s title and price across the bottom four frames on both sides with 0 opacity in the default state. On hover, this text moves up and becomes fully visible beneath the large preview. All images use mouse enter and mouse leave triggers to control the entire hover behaviour.
About the resource
To create the grid morphs into preview interaction, I started by building an image component with a hover variant. Then I arranged eight of these components in a grid layout, four on the left side and four on the right. This forms the default state.
For each image, I created a preview setup by masking the same image into four separate frames and placing those four frames on both sides of the grid. In the next variant, these four frames move and merge into the centre, forming a single large preview image. Each preview image uses the original asset at 200% width and height, masked to match the component size for a clean join.
When hovering over any of the left-side images, the four frames on the right animate together to form the larger preview. The opacity of the original grid images fades as the variant shifts from default to hover.
I also added each image’s title and price across the bottom four frames on both sides with 0 opacity in the default state. On hover, this text moves up and becomes fully visible beneath the large preview. All images use mouse enter and mouse leave triggers to control the entire hover behaviour.
About the resource
To create the grid morphs into preview interaction, I started by building an image component with a hover variant. Then I arranged eight of these components in a grid layout, four on the left side and four on the right. This forms the default state.
For each image, I created a preview setup by masking the same image into four separate frames and placing those four frames on both sides of the grid. In the next variant, these four frames move and merge into the centre, forming a single large preview image. Each preview image uses the original asset at 200% width and height, masked to match the component size for a clean join.
When hovering over any of the left-side images, the four frames on the right animate together to form the larger preview. The opacity of the original grid images fades as the variant shifts from default to hover.
I also added each image’s title and price across the bottom four frames on both sides with 0 opacity in the default state. On hover, this text moves up and becomes fully visible beneath the large preview. All images use mouse enter and mouse leave triggers to control the entire hover behaviour.
The grid component and its variants.
The grid component and its variants.
The grid component and its variants.
