Animation
Linktree 3D Flip Animation in Framer
This is a 3D card flip animation in Framer (recreated from the Linktree website) combined with my 3D look component. Feel free to copy the component to your project and start playing around with it, or watch the tutorial to learn more.
Created by
About the resource
Well, this interaction is achieved by combining multiple techniques in Framer.
First, the card flip animation is created by making a component with multiple variants, each having a different 3D transform. I'm not gonna go into more details here, but feel free to watch this tutorial where I show how to create a card flip animation from scratch.
Then, this card flip animation component is connected to the 3D look component (you can get it here), which adds the 3D look effect to the card. This basically means the card will tilt and rotate in 3D space in the direction of our cursor.
Preserve 3D code override
Feel free to copy this override and create it in your own project to apply it to the component. This will essentially give the preserve-3D style to the element. We need this override because Framer doesn't natively allow adding transform properties to primary variants in components.
About the resource
Well, this interaction is achieved by combining multiple techniques in Framer.
First, the card flip animation is created by making a component with multiple variants, each having a different 3D transform. I'm not gonna go into more details here, but feel free to watch this tutorial where I show how to create a card flip animation from scratch.
Then, this card flip animation component is connected to the 3D look component (you can get it here), which adds the 3D look effect to the card. This basically means the card will tilt and rotate in 3D space in the direction of our cursor.
Preserve 3D code override
Feel free to copy this override and create it in your own project to apply it to the component. This will essentially give the preserve-3D style to the element. We need this override because Framer doesn't natively allow adding transform properties to primary variants in components.
About the resource
Well, this interaction is achieved by combining multiple techniques in Framer.
First, the card flip animation is created by making a component with multiple variants, each having a different 3D transform. I'm not gonna go into more details here, but feel free to watch this tutorial where I show how to create a card flip animation from scratch.
Then, this card flip animation component is connected to the 3D look component (you can get it here), which adds the 3D look effect to the card. This basically means the card will tilt and rotate in 3D space in the direction of our cursor.
Preserve 3D code override
Feel free to copy this override and create it in your own project to apply it to the component. This will essentially give the preserve-3D style to the element. We need this override because Framer doesn't natively allow adding transform properties to primary variants in components.
import { useState, useEffect, ComponentType } from "react"
export function withPreserve3d(Component): ComponentType {
return (props) => {
return (
<Component {...props} style={{ transformStyle: "preserve-3d" }} />
)
}
}import { useState, useEffect, ComponentType } from "react"
export function withPreserve3d(Component): ComponentType {
return (props) => {
return (
<Component {...props} style={{ transformStyle: "preserve-3d" }} />
)
}
}import { useState, useEffect, ComponentType } from "react"
export function withPreserve3d(Component): ComponentType {
return (props) => {
return (
<Component {...props} style={{ transformStyle: "preserve-3d" }} />
)
}
}
