Interaction
AirBnb 3D Book Interaction in Framer
Created by
About The Resource
This 3D interaction can be created in Framer, thanks to the amazing 3D transforms feature.
You can simply create two frames on the canvas, one for the back of the book and one for the front. Then apply a 3D rotation to the front side so it looks slightly opened.
After wrapping the front and back sides of the book in a common frame, we can turn it into a component and create a new variant where we change the rotation degree so the book opens up more.
About The Resource
This 3D interaction can be created in Framer, thanks to the amazing 3D transforms feature.
You can simply create two frames on the canvas, one for the back of the book and one for the front. Then apply a 3D rotation to the front side so it looks slightly opened.
After wrapping the front and back sides of the book in a common frame, we can turn it into a component and create a new variant where we change the rotation degree so the book opens up more.
About The Resource
This 3D interaction can be created in Framer, thanks to the amazing 3D transforms feature.
You can simply create two frames on the canvas, one for the back of the book and one for the front. Then apply a 3D rotation to the front side so it looks slightly opened.
After wrapping the front and back sides of the book in a common frame, we can turn it into a component and create a new variant where we change the rotation degree so the book opens up more.
AirBnb book interaction component variants.
AirBnb book interaction component variants.
AirBnb book interaction component variants.
In the end, all we have to do is connect the two variants with mouse enter and mouse leave interactions.
In the end, all we have to do is connect the two variants with mouse enter and mouse leave interactions.
In the end, all we have to do is connect the two variants with mouse enter and mouse leave interactions.
