Component
Minimal Folder Animation in Framer
This is a minimal folder animation recreated in Framer, based on the original work by Oleksandr Plyuto. Feel free to remix it and explore how it’s put together—all without using any code.



About the resource
To bring the minimal folder animation to life in Framer, I set up two key variants: "closed" and "opened." The back frame sits relatively positioned within the folder stack, while the rest of the elements, including three images, are set to absolute positioning. This layout allows the images to reposition as the folder transitions from "closed" to "opened."
I added hover interactions to make the folder switch between these states. To achieve the magnetic effect, I integrated the magnetic hover component into the primary variant.
About the resource
To bring the minimal folder animation to life in Framer, I set up two key variants: "closed" and "opened." The back frame sits relatively positioned within the folder stack, while the rest of the elements, including three images, are set to absolute positioning. This layout allows the images to reposition as the folder transitions from "closed" to "opened."
I added hover interactions to make the folder switch between these states. To achieve the magnetic effect, I integrated the magnetic hover component into the primary variant.
About the resource
To bring the minimal folder animation to life in Framer, I set up two key variants: "closed" and "opened." The back frame sits relatively positioned within the folder stack, while the rest of the elements, including three images, are set to absolute positioning. This layout allows the images to reposition as the folder transitions from "closed" to "opened."
I added hover interactions to make the folder switch between these states. To achieve the magnetic effect, I integrated the magnetic hover component into the primary variant.

The "closed" and "opened" variants of the folder component.

The "closed" and "opened" variants of the folder component.

The "closed" and "opened" variants of the folder component.