Minimal Folder Animation in Framer

Copy component

Minimal 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

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.

image of Nandi Muzsik
Image of Oleksandr
image of Prianca S.

Created by

Floating design elements with modern objects and clickable Framer interface button
Floating design elements with modern objects and clickable Framer interface button
Floating design elements with modern objects and clickable Framer interface button

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.

Interactive Framer interface showcasing folder states with modern design elements

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

Interactive Framer interface showcasing folder states with modern design elements

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

Interactive Framer interface showcasing folder states with modern design elements

The "closed" and "opened" variants of the 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

  • Graphic announcing a new text magnifier component in Framer, displayed with the phrase 'Text magnifier now in Framer' against a dark background

    Text Magnifier Component for Framer

    Component

    Graphic announcing a new text magnifier component in Framer, displayed with the phrase 'Text magnifier now in Framer' against a dark background

    Text Magnifier Component for Framer

    Component

    Graphic announcing a new text magnifier component in Framer, displayed with the phrase 'Text magnifier now in Framer' against a dark background

    Text Magnifier Component for Framer

    Component

  • Interior-themed image categories including a cozy room corner, a futuristic car, and a minimalist bedside setup

    Image Hover Card in Framer

    Component

    Interior-themed image categories including a cozy room corner, a futuristic car, and a minimalist bedside setup

    Image Hover Card in Framer

    Component

    Interior-themed image categories including a cozy room corner, a futuristic car, and a minimalist bedside setup

    Image Hover Card in Framer

    Component