Component
Photos Folder Animation in Framer
This is a Framer recreation of the photos folder animation from Ilya’s original work. Feel free to remix the project to explore how this interaction was built — all without writing a single line of code.
Created by
To use the photos folder animation, start with a folder component set up with two variants: default and hover. The folder SVG is masked inside a frame, and sticker images (created in Figma) are placed within this folder frame. Below the folder, a stack of four photo frames is added using absolute positioning.
To get the 3D tilt effect, 3D transform is applied to the folder—rotated on the x axis to -45° and tweaked the transform origin to rotate it from the bottom edge. On hover, the depth value is increased to bring the folder closer, while the photos shift position to pop out.
To use the photos folder animation, start with a folder component set up with two variants: default and hover. The folder SVG is masked inside a frame, and sticker images (created in Figma) are placed within this folder frame. Below the folder, a stack of four photo frames is added using absolute positioning.
To get the 3D tilt effect, 3D transform is applied to the folder—rotated on the x axis to -45° and tweaked the transform origin to rotate it from the bottom edge. On hover, the depth value is increased to bring the folder closer, while the photos shift position to pop out.
To use the photos folder animation, start with a folder component set up with two variants: default and hover. The folder SVG is masked inside a frame, and sticker images (created in Figma) are placed within this folder frame. Below the folder, a stack of four photo frames is added using absolute positioning.
To get the 3D tilt effect, 3D transform is applied to the folder—rotated on the x axis to -45° and tweaked the transform origin to rotate it from the bottom edge. On hover, the depth value is increased to bring the folder closer, while the photos shift position to pop out.
