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 :)
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!
Top comments (0)