Resources

Fluid Album Viewer in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Fluid Album Viewer in Framer

View demo

Copy component

Remix project

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

Interaction

Fluid Album Viewer in Framer

This is a fluid album viewer effect as a Framer component recreated from Preet’s original concept. It’s designed using clever positioning tricks to achieve smooth, flowing transitions. Feel free to copy and add it to your project to see how it works.

image of Nandi Muzsik
image of Preet Mishra
image of Prianca S.

Created by

Nandi

,

Preet

,

and

Prianca

Hand holding a retro-inspired compact camera with side previews

About the resource

I started by setting up the default variant in a grid with three columns and two rows. Making sure the images are centred in their frames, and no pins are active. For the "Image 1" variant, I set the zoomed-in frame to absolute position while keeping the rest in relative position. Then, added an on-click interaction from the first image to this variant.

That’s it! Just repeat the same steps for the other three variants to create the same interaction.

About the resource

I started by setting up the default variant in a grid with three columns and two rows. Making sure the images are centred in their frames, and no pins are active. For the "Image 1" variant, I set the zoomed-in frame to absolute position while keeping the rest in relative position. Then, added an on-click interaction from the first image to this variant.

That’s it! Just repeat the same steps for the other three variants to create the same interaction.

About the resource

I started by setting up the default variant in a grid with three columns and two rows. Making sure the images are centred in their frames, and no pins are active. For the "Image 1" variant, I set the zoomed-in frame to absolute position while keeping the rest in relative position. Then, added an on-click interaction from the first image to this variant.

That’s it! Just repeat the same steps for the other three variants to create the same interaction.

Interactive album view with grid and detailed image display

The two variants of the image viewer component.

Interactive album view with grid and detailed image display

The two variants of the image viewer component.

Interactive album view with grid and detailed image display

The two variants of the image viewer component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

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.

Join waitlist

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.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Glitch effect Chinese typography with technology theme design

    Hover Text Repeat Effect in Framer

    Interaction

    Glitch effect Chinese typography with technology theme design

    Hover Text Repeat Effect in Framer

    Interaction

  • Minimal FAQ layout showing digital book question and detailed answer

    Unusual FAQs Section in Framer

    Interaction

    Minimal FAQ layout showing digital book question and detailed answer

    Unusual FAQs Section in Framer

    Interaction