Interaction

Image Gallery Open Interaction in Framer

This is an image gallery with open interaction in Framer, inspired by Tobi. It's created without writing a single line of code, just by drawing rectangles on a design canvas. Feel free to remix the project and see how you can create something like this.

Created by

Nandi

and

Tobi

Image Gallery Open Interaction in Framer

About the resource

The resources are created with a component that has two variants: one is "default" and the other is "open."

In the open variant, you can simply adjust the position and scale of the images to open up the gallery.

To create the interaction, I just connected the two variants using the button element and set the trigger to "tap." So, when we click the button, we switch to the open variant.

About the resource

The resources are created with a component that has two variants: one is "default" and the other is "open."

In the open variant, you can simply adjust the position and scale of the images to open up the gallery.

To create the interaction, I just connected the two variants using the button element and set the trigger to "tap." So, when we click the button, we switch to the open variant.

About the resource

The resources are created with a component that has two variants: one is "default" and the other is "open."

In the open variant, you can simply adjust the position and scale of the images to open up the gallery.

To create the interaction, I just connected the two variants using the button element and set the trigger to "tap." So, when we click the button, we switch to the open variant.

image gallery component variants in Framer — Image gallery component variants in Framer.

Image Gallery Open Interaction in Framer

About the resource

About the resource

About the resource

Learn the fundamentals of Framer for free.

Learn the fundamentals of Framer for free.

Learn the fundamentals of Framer for free.

More resources

More resources