Component
Image Gallery Scroll Animation in Framer
This is a Framer recreation of a scroll animation inspired by Alex Frison’s work. Feel free to remix the project and discover how easy it is to create this effect using only Framer’s built-in tools.
Created by
About the resource
To create this animation, I built a gallery component with 12 variants: 6 image mask variants—one for each image—and 6 image scale variants for each gallery image.
In the default variant, I split the canvas into two sections: the active layer on the left and the sidebar stacked on the right. The active layer nests all 6 images, each with its own mask. The sidebar stacks the images together with spacer frames. I created an image component with two states: active and inactive (minimized). When a particular image is active—like image 1—the sidebar syncs up, highlighting that image as active while keeping the rest minimized.
For the scaled-up variants, I set the opacity of all masks to zero except for the one corresponding to the active image, which is scaled up, while the others stay scaled down. The sidebar shifts right and moves partially off-screen in these variants. To connect the normal and scaled-up variants, I used an appear interaction.
Finally, I added a scroll-triggered effect to the gallery component that switches between variants based on which scroll section is currently in view.
About the resource
To create this animation, I built a gallery component with 12 variants: 6 image mask variants—one for each image—and 6 image scale variants for each gallery image.
In the default variant, I split the canvas into two sections: the active layer on the left and the sidebar stacked on the right. The active layer nests all 6 images, each with its own mask. The sidebar stacks the images together with spacer frames. I created an image component with two states: active and inactive (minimized). When a particular image is active—like image 1—the sidebar syncs up, highlighting that image as active while keeping the rest minimized.
For the scaled-up variants, I set the opacity of all masks to zero except for the one corresponding to the active image, which is scaled up, while the others stay scaled down. The sidebar shifts right and moves partially off-screen in these variants. To connect the normal and scaled-up variants, I used an appear interaction.
Finally, I added a scroll-triggered effect to the gallery component that switches between variants based on which scroll section is currently in view.
About the resource
To create this animation, I built a gallery component with 12 variants: 6 image mask variants—one for each image—and 6 image scale variants for each gallery image.
In the default variant, I split the canvas into two sections: the active layer on the left and the sidebar stacked on the right. The active layer nests all 6 images, each with its own mask. The sidebar stacks the images together with spacer frames. I created an image component with two states: active and inactive (minimized). When a particular image is active—like image 1—the sidebar syncs up, highlighting that image as active while keeping the rest minimized.
For the scaled-up variants, I set the opacity of all masks to zero except for the one corresponding to the active image, which is scaled up, while the others stay scaled down. The sidebar shifts right and moves partially off-screen in these variants. To connect the normal and scaled-up variants, I used an appear interaction.
Finally, I added a scroll-triggered effect to the gallery component that switches between variants based on which scroll section is currently in view.
The 12 variants of the gallery component.
The 12 variants of the gallery component.
The 12 variants of the gallery component.
