Component
Grey Folder Interaction in Framer
About the resource
To create the grey folder animation, I started with a folder component that has two variants: default and hover. I structured it with a front layer, a back layer, and three files in between to build the folder’s depth.
I applied 3D transform to all the layers and enabled preserve-3D so the perspective would stay consistent. In the default variant, the folder remains closed with the front layer flat, while in the hover variant, I rotated the front layer along the X-axis to make it look like the folder is opening to reveal the files.
Finally, I connected the two variants with a hover interaction so the front layer tilts open on hover and returns when the hover ends.
About the resource
To create the grey folder animation, I started with a folder component that has two variants: default and hover. I structured it with a front layer, a back layer, and three files in between to build the folder’s depth.
I applied 3D transform to all the layers and enabled preserve-3D so the perspective would stay consistent. In the default variant, the folder remains closed with the front layer flat, while in the hover variant, I rotated the front layer along the X-axis to make it look like the folder is opening to reveal the files.
Finally, I connected the two variants with a hover interaction so the front layer tilts open on hover and returns when the hover ends.
About the resource
To create the grey folder animation, I started with a folder component that has two variants: default and hover. I structured it with a front layer, a back layer, and three files in between to build the folder’s depth.
I applied 3D transform to all the layers and enabled preserve-3D so the perspective would stay consistent. In the default variant, the folder remains closed with the front layer flat, while in the hover variant, I rotated the front layer along the X-axis to make it look like the folder is opening to reveal the files.
Finally, I connected the two variants with a hover interaction so the front layer tilts open on hover and returns when the hover ends.
The two default and hover variants of the grey folder component.
The two default and hover variants of the grey folder component.
The two default and hover variants of the grey folder component.
