Component
Animated 3D Flipping Hero Section in Framer
This is an animated 3d flipping hero section recreated in Framer without any code, based on the original from Dutch design agency. You can remix the file and explore how this hero animation is built using 3D transforms.
About the resource
To create this animation in Framer, I started by making a component with 3D spaces using 3D transforms. Inside those, I added the images. The whole idea is just rotating these 3D space layers so it looks like the images are flipping.
In the Default variant, only the first 3D space is visible. The second one is rotated along the Y-axis and placed far away from the canvas so you don’t see it. Its text is also set to not visible.
In the Flip 1 variant, the first 3D space rotates to start the flip, while the second one stays hidden. In the Flip 2 variant, the second 3D space rotates into view, and its images now show up on the canvas. The text layers are also rotated 90° so they look naturally flipped.
To bring everything together, I added an Appear interaction that moves from the Default variant to Flip 2, creating the full flipping transition.
About the resource
To create this animation in Framer, I started by making a component with 3D spaces using 3D transforms. Inside those, I added the images. The whole idea is just rotating these 3D space layers so it looks like the images are flipping.
In the Default variant, only the first 3D space is visible. The second one is rotated along the Y-axis and placed far away from the canvas so you don’t see it. Its text is also set to not visible.
In the Flip 1 variant, the first 3D space rotates to start the flip, while the second one stays hidden. In the Flip 2 variant, the second 3D space rotates into view, and its images now show up on the canvas. The text layers are also rotated 90° so they look naturally flipped.
To bring everything together, I added an Appear interaction that moves from the Default variant to Flip 2, creating the full flipping transition.
About the resource
To create this animation in Framer, I started by making a component with 3D spaces using 3D transforms. Inside those, I added the images. The whole idea is just rotating these 3D space layers so it looks like the images are flipping.
In the Default variant, only the first 3D space is visible. The second one is rotated along the Y-axis and placed far away from the canvas so you don’t see it. Its text is also set to not visible.
In the Flip 1 variant, the first 3D space rotates to start the flip, while the second one stays hidden. In the Flip 2 variant, the second 3D space rotates into view, and its images now show up on the canvas. The text layers are also rotated 90° so they look naturally flipped.
To bring everything together, I added an Appear interaction that moves from the Default variant to Flip 2, creating the full flipping transition.
The flippimg hero component and its variants.
The flippimg hero component and its variants.
The flippimg hero component and its variants.
