Letter Fold Interaction in Framer

Copy component

Letter Fold Interaction in Framer

Copy component

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

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

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

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

  • 3D rotating globe of images with a highlighted control device in the center

    Interactive 3D Globe Image Grid

    Interaction

    3D rotating globe of images with a highlighted control device in the center

    Interactive 3D Globe Image Grid

    Interaction

    3D rotating globe of images with a highlighted control device in the center

    Interactive 3D Globe Image Grid

    Interaction

  • Hand holding a retro-inspired compact camera with side previews

    Fluid Album Viewer in Framer

    Interaction

    Hand holding a retro-inspired compact camera with side previews

    Fluid Album Viewer in Framer

    Interaction

    Hand holding a retro-inspired compact camera with side previews

    Fluid Album Viewer in Framer

    Interaction