Letter Fold Interaction in Framer

Copy component

Copy component

Letter Fold Interaction in Framer

Copy component

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.

image of Nandi Muzsik
image of Sam

Created by

Letter Fold Interaction in Framer
Letter Fold Interaction in Framer
Letter Fold Interaction in Framer

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.

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

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

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction

    Trash Interaction in Framer

    Trash Interaction in Framer

    Interaction