3D Image Gallery in Framer

Copy component

3D Image Gallery in Framer

Copy component

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

Animation

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.

image of Nandi Muzsik
profile image of Ben Paine

Created by

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

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.

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.

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

3D image gallery component variants.

3D image gallery component variants

3D image gallery component variants.

3D image gallery component variants

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.

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.

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

3D gallery scroll variant effect.

3D gallery scroll variant effect

3D gallery scroll variant effect.

3D gallery scroll variant effect

3D gallery scroll variant effect.

Framer Navigator

Learn the fundamentals of Framer for free.

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

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.

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.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

    Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

    Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

  • Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation