Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Interaction
This is a nicely animated letter-opening interaction in Framer, recreated from the talented Sam's original concept. Feel free to check out the project file by remixing it to see how it's built. Alternatively, you can also just copy and paste the component into your project.
This is a simple yet effective interaction that animates on hover. I use three frames for each fold in the letter-opening animation, all wrapped in a common frame and turned into a component.
This is a simple yet effective interaction that animates on hover. I use three frames for each fold in the letter-opening animation, all wrapped in a common frame and turned into a component.
This is a simple yet effective interaction that animates on hover. I use three frames for each fold in the letter-opening animation, all wrapped in a common frame and turned into a component.
The folds of the letter are separate frames, laid out on the canvas.
The folds of the letter are separate frames, laid out on the canvas.
The folds of the letter are separate frames, laid out on the canvas.
By creating a hover state, I apply the right 3D transforms to each fold, achieving the desired visual effect. If you’re not familiar with 3D transforms in Framer, check out my free 30-minute crash course on the topic.
By creating a hover state, I apply the right 3D transforms to each fold, achieving the desired visual effect. If you’re not familiar with 3D transforms in Framer, check out my free 30-minute crash course on the topic.
By creating a hover state, I apply the right 3D transforms to each fold, achieving the desired visual effect. If you’re not familiar with 3D transforms in Framer, check out my free 30-minute crash course on the topic.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
