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.
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.
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.
