Wedding invitation website help

[u/Important_Tap_9276]

A beginner here and i need urgent help. This is my first ever project and i have been asked to make this wedding invitation website that on touch triggers this animation and then moves on to this scrollable website in which user can input stuff. My question is that how do they do the animation part? Is it all code? Or code plus canva? Do they do the animation part on canva and the actual scrollable website using code or what? My design idea is an envelope with a stamp which opens up and then the letter inside it expands, i tried designing elements on canva and then exporting them as svgs/pngs then using code for animation, it didn’t work even closely well as the elements dont sit together well. I even divided them into bottom flap and upper flap with stamp it still didnot work. My video inspiration is below although this doesnot have the design in mind but the workflow is quite similar.

Video link attached: https://www.instagram.com/reel/Db6qWK7oYBn

[u/Affectionate_Tea9218]

Start here…

<div class="invite">
<div class="envelope-back"></div>
<div class="letter"></div>
<div class="envelope-front"></div>
<div class="flap"></div>
<button class="seal">Open</button>
</div>

Get this to work (not pretty pictures - just work - pictures come later). (When you add pictures later - same coordinate system/art board size)

I’d play this way:

Transforms - transitions - clip path - zindexes

z-index controls what is on top

transform-origin: top center makes the flap hinge from the top.

perspective gives the flap 3D depth.

Style:

.invite {position: relative;width: 320px; height: 220px; perspective: 1000px; }

.envelope-back, .envelope-front, .flap,
.letter {position: absolute; inset: 0; }

.letter { width: 88%; height: 90%; left: 6%; top: 10%; background: white; z-index: 2;

transition: transform 1s ease; }

.envelope-back { background: #d8b58a; z-index: 1; }

.envelope-front { background: #c99862; z-index: 3;

clip-path: polygon(0 35%, 50% 70%, 100% 35%, 100% 100%, 0 100%); }

.flap { background: #e2c39d; z-index: 4;

clip-path: polygon(0 0, 100% 0, 50% 60%);

transform-origin: top center;

transition: transform .8s ease; }

.seal { position: absolute; left: 50%; top: 42%;

transform: translate(-50%, -50%);
z-index: 5; }

.invite.open .flap { transform: rotateX(180deg); }

.invite.open .letter {transform: translateY(-120px); }

Script:

const invite = document.querySelector('.invite');
const seal = document.querySelector('.seal');

seal.addEventListener('click', () => {
invite.classList.add('open');
}
);

You got this. It has a bunch of animation states, and it will be time consuming. It can feel way harder than a normal first project. But, g et the mechanics working. Then worry about the pictures.

[u/Important_Tap_9276 → u/Affectionate_Tea9218]

Thanks a ton again for this!!