Image Gallery Open Interaction in Framer

Image Gallery Open Interaction in Framer

Image Gallery Open Interaction in Framer

Image Gallery Open Interaction in Framer

Interaction

Interaction

Interaction

Interaction

Image Gallery Open Interaction in Framer

Image Gallery Open Interaction in Framer

Image Gallery Open Interaction in Framer

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.

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.

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.

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.

Image Gallery Open Interaction in Framer
Image Gallery Open Interaction in Framer
Image Gallery Open Interaction in Framer
Image Gallery Open Interaction in Framer

Copy component

Copy component

Copy component

Copy component

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
Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how it's built.

Step 3 outline

Step / 03

Try recreating it for practice, or copy and paste it to your project.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.