Component
3D Gallery Loading Animation in Framer
About the resource
To create this gallery loading animation, I created three variants. In the primary variant, the images are masked to just 1px in width and height, with a slight rotation for some extra flair. Both the masks and images are set to absolute positions, and everything is nested under a content wrapper where I applied a 3D transform. I also added an appear transition so the animation smoothly moves from the primary “Out” variant to the "In" variant.
Important: make sure that the image layer within each mask is set to absolute positioning with all pins deactivated. If you leave your pins activated, the images will scale with the masks.
About the resource
To create this gallery loading animation, I created three variants. In the primary variant, the images are masked to just 1px in width and height, with a slight rotation for some extra flair. Both the masks and images are set to absolute positions, and everything is nested under a content wrapper where I applied a 3D transform. I also added an appear transition so the animation smoothly moves from the primary “Out” variant to the "In" variant.
Important: make sure that the image layer within each mask is set to absolute positioning with all pins deactivated. If you leave your pins activated, the images will scale with the masks.
About the resource
To create this gallery loading animation, I created three variants. In the primary variant, the images are masked to just 1px in width and height, with a slight rotation for some extra flair. Both the masks and images are set to absolute positions, and everything is nested under a content wrapper where I applied a 3D transform. I also added an appear transition so the animation smoothly moves from the primary “Out” variant to the "In" variant.
Important: make sure that the image layer within each mask is set to absolute positioning with all pins deactivated. If you leave your pins activated, the images will scale with the masks.
The "Out" and "In" varaint of the gallery loading component.
The "Out" and "In" varaint of the gallery loading component.
The "Out" and "In" varaint of the gallery loading component.
On the "In" variant, I bumped up the size of the masks and added a transition overrides with increasing delay values. This creates a nice staggered effect as the images animate in after one another.
Finally, with another appear transition, the animation shifts to the "3D" variant. In this stage, I added 3D rotation to the content wrapper along the X-axis (-30°) and Y-axis (40°) and adjusted the positions of the individual masks to achieve the desired 3D view for the transition's final appearance.
On the "In" variant, I bumped up the size of the masks and added a transition overrides with increasing delay values. This creates a nice staggered effect as the images animate in after one another.
Finally, with another appear transition, the animation shifts to the "3D" variant. In this stage, I added 3D rotation to the content wrapper along the X-axis (-30°) and Y-axis (40°) and adjusted the positions of the individual masks to achieve the desired 3D view for the transition's final appearance.
On the "In" variant, I bumped up the size of the masks and added a transition overrides with increasing delay values. This creates a nice staggered effect as the images animate in after one another.
Finally, with another appear transition, the animation shifts to the "3D" variant. In this stage, I added 3D rotation to the content wrapper along the X-axis (-30°) and Y-axis (40°) and adjusted the positions of the individual masks to achieve the desired 3D view for the transition's final appearance.
The three variants of the gallery loading component.
The three variants of the gallery loading component.
The three variants of the gallery loading component.
