Minimal Folder Animation in Framer

Copy component

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

How to Make $10K+ with Framer in 60 days

$10k Undercover Event

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

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.

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Nandi portrait's background

More resources

More resources

  • Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

    Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

  • Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component

    Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component