Interaction

Letter Fold Interaction in Framer

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.

Created by

Nandi

and

Sam

About the resource

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.

About the resource

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.

About the resource

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.

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.

Letter Fold Interaction in Framer

About the resource

About the resource

About the resource

Learn the fundamentals of Framer for free.

Learn the fundamentals of Framer for free.

Learn the fundamentals of Framer for free.

More resources

More resources