Component
Airbnb 3D Card Flip Animation in Framer
This is a 3D card flip animation recreated in Framer, based on the transition in the Airbnb website. Remix to see how it’s built without code, or copy the component into your own project.
About the resource
To create the 3D flip card animation in Framer, I used 3D transforms along with a rollover setup. I created four variants. In the default variant, I set up the front and back sides of the card and nested them inside a “faces” layer. I applied a 3D transform to this layer so both sides exist in the same 3D space.
To prep the back side, I rotated it on the Y-axis by -180°. Then, to actually flip the card, I rotated the entire “faces” layer on the Y-axis by -180°. I also set the backface visibility to hidden on both front and back layers so the flip looks clean. Finally, I added click and appear interactions between the variants to create a smooth flow through the animation.
About the resource
To create the 3D flip card animation in Framer, I used 3D transforms along with a rollover setup. I created four variants. In the default variant, I set up the front and back sides of the card and nested them inside a “faces” layer. I applied a 3D transform to this layer so both sides exist in the same 3D space.
To prep the back side, I rotated it on the Y-axis by -180°. Then, to actually flip the card, I rotated the entire “faces” layer on the Y-axis by -180°. I also set the backface visibility to hidden on both front and back layers so the flip looks clean. Finally, I added click and appear interactions between the variants to create a smooth flow through the animation.
About the resource
To create the 3D flip card animation in Framer, I used 3D transforms along with a rollover setup. I created four variants. In the default variant, I set up the front and back sides of the card and nested them inside a “faces” layer. I applied a 3D transform to this layer so both sides exist in the same 3D space.
To prep the back side, I rotated it on the Y-axis by -180°. Then, to actually flip the card, I rotated the entire “faces” layer on the Y-axis by -180°. I also set the backface visibility to hidden on both front and back layers so the flip looks clean. Finally, I added click and appear interactions between the variants to create a smooth flow through the animation.
The four variants connected with roll over technique in Framer.
The four variants connected with roll over technique in Framer.
The four variants connected with roll over technique in Framer.
