Component
3D Folder Open Animation in Framer
About the resource
To make the 3D folder open animation in Framer, I created two variants of the folder: one closed and one opened. Within the folder stack, I set the back frame of the folder to relative position, and every other frame to absolute, so then later they can be animated to the top on the opened variant.
Then, I added click interactions to trigger the animation. When clicked, the folder switches from the closed state to the open one. Framer smoothly animates between these states based on the transition settings of the variants.
About the resource
To make the 3D folder open animation in Framer, I created two variants of the folder: one closed and one opened. Within the folder stack, I set the back frame of the folder to relative position, and every other frame to absolute, so then later they can be animated to the top on the opened variant.
Then, I added click interactions to trigger the animation. When clicked, the folder switches from the closed state to the open one. Framer smoothly animates between these states based on the transition settings of the variants.
About the resource
To make the 3D folder open animation in Framer, I created two variants of the folder: one closed and one opened. Within the folder stack, I set the back frame of the folder to relative position, and every other frame to absolute, so then later they can be animated to the top on the opened variant.
Then, I added click interactions to trigger the animation. When clicked, the folder switches from the closed state to the open one. Framer smoothly animates between these states based on the transition settings of the variants.
The two variants of the component.
The two variants of the component.
The two variants of the component.
