Component
Collection Preview Interaction in Framer
This is a collective preview interaction component recreated in Framer from Jakub’s work. Feel free to remix or copy the component to use in your projects, or explore how it was built to learn similar interactions in Framer.
Created by
About the resource
To create this collective preview component with 7 variants, I started by setting up the expanded state first. I added all the elements — row 1, row 2, and the “View all” button — using relative positioning in the default variant to keep everything aligned properly. I also created an image component with two size variants, along with a separate “View all” button component that includes a hover state.
Next, I used the following four variants to animate the transition by scaling up the four images one by one. For the collapsed variant, I switched the images to absolute positioning, changed the layout direction of row 1, scaled down the “View all” button, and set its opacity to 0 to hide it. In the final variant, I added a subtle rotation to the images for hover animation.
Lastly, I added the interactions — hovering over the main image triggers the hover effect, the smaller images slightly scale up on mouse enter, and clicking the “View all” button switches the component to its collapsed variant.
About the resource
To create this collective preview component with 7 variants, I started by setting up the expanded state first. I added all the elements — row 1, row 2, and the “View all” button — using relative positioning in the default variant to keep everything aligned properly. I also created an image component with two size variants, along with a separate “View all” button component that includes a hover state.
Next, I used the following four variants to animate the transition by scaling up the four images one by one. For the collapsed variant, I switched the images to absolute positioning, changed the layout direction of row 1, scaled down the “View all” button, and set its opacity to 0 to hide it. In the final variant, I added a subtle rotation to the images for hover animation.
Lastly, I added the interactions — hovering over the main image triggers the hover effect, the smaller images slightly scale up on mouse enter, and clicking the “View all” button switches the component to its collapsed variant.
About the resource
To create this collective preview component with 7 variants, I started by setting up the expanded state first. I added all the elements — row 1, row 2, and the “View all” button — using relative positioning in the default variant to keep everything aligned properly. I also created an image component with two size variants, along with a separate “View all” button component that includes a hover state.
Next, I used the following four variants to animate the transition by scaling up the four images one by one. For the collapsed variant, I switched the images to absolute positioning, changed the layout direction of row 1, scaled down the “View all” button, and set its opacity to 0 to hide it. In the final variant, I added a subtle rotation to the images for hover animation.
Lastly, I added the interactions — hovering over the main image triggers the hover effect, the smaller images slightly scale up on mouse enter, and clicking the “View all” button switches the component to its collapsed variant.
The seven variants of the collection preview interaction component.
The seven variants of the collection preview interaction component.
The seven variants of the collection preview interaction component.
