DEV Community

superoverflow
superoverflow

Posted on

Make a slide open envelope

Intro

Everyone loves receiving a letter from a friend. But with technology advances, does anyone miss receiving one?

I thought of making a wedding invitation recently. And I wanted to make the receipients felt like opening a letter!

To do that, I have learnt:

  • How to create an envelope just by css
  • How to animate the envelope openning with framer motion

The end result for me looks like this and I am pretty happy with it :)

Image description

Making an envelope with css

Before making an animated envelopes, it is important we can make a static one and understand how it works. Here is an example,

Point to note:

  • The envelope is essentially a zero width/height div with transparent top border
  • To make the lip half open, we will just need to use transform: rotateX(45deg)

Making css animation with framer motion

  • Framer motion is an easy way to animate the evelope lid open
  • see below example

Repo and Demo

  • With above serving the basics and some hard work, you will be able to make a scroll controlled envelope. Enjoy!

Repo
Demo
GSheet capturing response

Top comments (0)