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

  • Text 'Animated Gradients' over a dynamic blue gradient background

    Animated Gradient Background in Framer

    Component

    Text 'Animated Gradients' over a dynamic blue gradient background

    Animated Gradient Background in Framer

    Component

    Text 'Animated Gradients' over a dynamic blue gradient background

    Animated Gradient Background in Framer

    Component

  • An elegant user interface showcases the iPadOS pointer cursor within the Framer platform, emphasizing options to remix the project, copy the component, or seek inspiration, all set against a captivating deep blue gradient background

    iPadOS Pointer Cursor in Framer

    Component

    An elegant user interface showcases the iPadOS pointer cursor within the Framer platform, emphasizing options to remix the project, copy the component, or seek inspiration, all set against a captivating deep blue gradient background

    iPadOS Pointer Cursor in Framer

    Component

    An elegant user interface showcases the iPadOS pointer cursor within the Framer platform, emphasizing options to remix the project, copy the component, or seek inspiration, all set against a captivating deep blue gradient background

    iPadOS Pointer Cursor in Framer

    Component