Clean Folder Animation in Framer

Copy component

Clean Folder Animation in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

New

New

New

Component

Clean Folder Animation in Framer

This is a clean folder animation recreated in Framer, from the original work by Outpace studios. You can explore how it’s built or copy it straight into your own projects.

image of Nandi Muzsik
image of Prianca S.
Logo of Outpace Studios

Created by

,

and

Clean orange folder icon with documents and cursor pointer
Clean orange folder icon with documents and cursor pointer
Clean orange folder icon with documents and cursor pointer

About the resource

To build this folder animation, I started by creating the folder itself with a front, back, and three paper layers inside. Then I added 3D transforms to place everything into a 3D space. I adjusted the perspective and origin so the folder rotates naturally from the bottom, and once that felt right, I turned it into a component.

For the hover variant, I rotated the paper layers along with the front cover. Finally, I linked the variants with a hover interaction and applied an easing transition to keep the animation smooth.

About the resource

To build this folder animation, I started by creating the folder itself with a front, back, and three paper layers inside. Then I added 3D transforms to place everything into a 3D space. I adjusted the perspective and origin so the folder rotates naturally from the bottom, and once that felt right, I turned it into a component.

For the hover variant, I rotated the paper layers along with the front cover. Finally, I linked the variants with a hover interaction and applied an easing transition to keep the animation smooth.

About the resource

To build this folder animation, I started by creating the folder itself with a front, back, and three paper layers inside. Then I added 3D transforms to place everything into a 3D space. I adjusted the perspective and origin so the folder rotates naturally from the bottom, and once that felt right, I turned it into a component.

For the hover variant, I rotated the paper layers along with the front cover. Finally, I linked the variants with a hover interaction and applied an easing transition to keep the animation smooth.

Clean orange folder UI animation showing default and hover states

The default and hover variants of the 3D folder component.

Clean orange folder UI animation showing default and hover states

The default and hover variants of the 3D folder component.

Clean orange folder UI animation showing default and hover states

The default and hover variants of the 3D folder component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Electric border component with glowing animated frame and neon UI buttons

    Electric Border Component for Framer

    Component

    Electric border component with glowing animated frame and neon UI buttons

    Electric Border Component for Framer

    Component

    Electric border component with glowing animated frame and neon UI buttons

    Electric Border Component for Framer

    Component

  • Framer card cycle animation with rotating stack showing Trojena Mountain design

    Card Cycle Animation in Framer

    Component

    Framer card cycle animation with rotating stack showing Trojena Mountain design

    Card Cycle Animation in Framer

    Component

    Framer card cycle animation with rotating stack showing Trojena Mountain design

    Card Cycle Animation in Framer

    Component