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

,

and

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

  • Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

    Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

    Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

  • Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component

    Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component

    Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component