3D Image Gallery in Framer

3D Image Gallery in Framer

3D Image Gallery in Framer

3D Image Gallery in Framer

Website animation

Website animation

Website animation

Website animation

3D Image Gallery in Framer

3D Image Gallery in Framer

3D Image Gallery in Framer

3D Image Gallery in Framer

This is a 3D image gallery that you can scroll through to view different images. It was created in Framer without any code and is inspired by Ben's original concept. Feel free to remix the project and play around with it.

This is a 3D image gallery that you can scroll through to view different images. It was created in Framer without any code and is inspired by Ben's original concept. Feel free to remix the project and play around with it.

This is a 3D image gallery that you can scroll through to view different images. It was created in Framer without any code and is inspired by Ben's original concept. Feel free to remix the project and play around with it.

This is a 3D image gallery that you can scroll through to view different images. It was created in Framer without any code and is inspired by Ben's original concept. Feel free to remix the project and play around with it.

3D Image Gallery in Framer
3D Image Gallery in Framer
3D Image Gallery in Framer
3D Image Gallery in Framer

Copy component

Copy component

Copy component

Copy component

About The Resource

To create this scroll animation, I used a component where I designed 22 variants. In each variant, the images have different 3D transforms that move them into their appropriate place in 3D space. If you want to learn everything about 3D transforms, watch my free crash course here.

3D image gallery component variants

To switch between the variants, I use the scroll animation technique that I explained step-by-step in this video. I keep the component in a sticky frame at the top of the site as I scroll down and use trigger frames with scroll sections to trigger the variant switches of the scroll effect.

3D gallery scroll variant effect
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.