Resources

Letter Fold Interaction in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Letter Fold Interaction in Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How to Make $10K+ with Framer in 60 days

Get the course

$10k Undercover Event

Get the course

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
profile image of Sam Peitz

Created by

Nandi

and

Sam

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.

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

More resources

More resources

View all

  • Glitch effect Chinese typography with technology theme design

    Hover Text Repeat Effect in Framer

    Interaction

    Glitch effect Chinese typography with technology theme design

    Hover Text Repeat Effect in Framer

    Interaction

  • Minimal FAQ layout showing digital book question and detailed answer

    Unusual FAQs Section in Framer

    Interaction

    Minimal FAQ layout showing digital book question and detailed answer

    Unusual FAQs Section in Framer

    Interaction