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

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
Hand holding a retro-inspired compact camera with side previews
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

  • Showcase of spatial 3D cards in a marketplace layout

    Spatial 3D Hero Section in Framer

    Interaction

    Showcase of spatial 3D cards in a marketplace layout

    Spatial 3D Hero Section in Framer

    Interaction

    Showcase of spatial 3D cards in a marketplace layout

    Spatial 3D Hero Section in Framer

    Interaction

  • Dark interface showing 'Sell Digital Art' button with eBook and Software text, featuring modern minimalist design

    3D Picker Wheel Interaction in Framer

    Interaction

    Dark interface showing 'Sell Digital Art' button with eBook and Software text, featuring modern minimalist design

    3D Picker Wheel Interaction in Framer

    Interaction

    Dark interface showing 'Sell Digital Art' button with eBook and Software text, featuring modern minimalist design

    3D Picker Wheel Interaction in Framer

    Interaction