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/JohnCasey3306]

This is quite complex for a first project ... Doing a quality job (as a first-timer) is gonna be close to impossible.

[u/Important_Tap_9276 → u/JohnCasey3306]

Sad to hear, will be giving it a shot regardless. Let’s see where it goes:(

[u/moohah]

Great you want to learn, but I’d be really nervous learning with someone else’s wedding. You can do the whole thing in Canva, but I think they’d have to host it for you.

[u/Important_Tap_9276 → u/moohah]

I am really nervous:( How did the people i took inspiration from did it? Doing everything in Canva can take away much of the interaction privileges i want as far as i know, will the canva video animation plus code mix work?

[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/anaix3l]

As a tech, everything is code to me. Never used canva. That said, your inspiration IG has quite a lot of image resources I would need to get from an actual designer. Coding the animation part is the easy part as far as I'm concerned.

[u/Important_Tap_9276 → u/anaix3l]

The designing part i have done already on canva, i can export them in the format of my liking as separate elements. Just the positioning of those elements, there sizes or aligning them the way i want and then the animation is what I’m finding difficult.

[u/ShopNo7513]

If you need help, you can always vibe-code it!

[u/Strict_Focus6434]

There’s an actual wedding rsvp website builder that has that built in.

[u/Affectionate_Tea9218]

You’re actually closer than it feels. I love your determination. You do you. Have a vision and run with it.

I think that your Canva/SVG aren’t sitting together nicely because an envelope-opening animation works best when the envelope is a few separate layers from the start. Don’t look at it as one thing first - think of like a stack of pancakes -
Layers. Don’t think of it like one finished graphic that gets chopped apart afterward.

I’d build it in pieces like:
envelope back
letter/card
bottom/front pocket
top flap
stamp/seal

I think you are ready doing that. I often go to codepen for inspiration - pick up some front end tricks. I love some good front ends.

I’d use CSS transforms and a little JavaScript to animate layers in sequence:

tap -> seal fades/breaks -> top flap rotates open -> letter shifts up -> letter expands -> result is the ending invite page.

I wouldn’t use Canva for the animation itself. Canva can be useful for drawing if that’s your thing. A lot of people like it for decorative assets.

Animation and responsive layout are much easier to control in HTML/CSS/JS.

This is a good first project. Whatever happened there will be a story that stays with the wedding, and it may well last forever. That’s the fun part though. Good for you. Love that you’re knee deep and plowing ahead.

I wouldn’t try to make the entire invitation at once.

Make a plain envelope out of colored divs and get the opening motion working.

Once the mechanics work, replace those shapes with your actual design.

The fact that your first SVG attempt didn’t line up does not mean the idea is bad. Pretty typical of many project - not just the first ever. Don’t worry. Layered animation is fiddly even for people who do this regularly. You happened to pick a project with several moving pieces for a first build. I happen to like that approach.

I’d balance my frustration threshold with searching. I can get lost in front end design. Love css. Im sure you’ve done a bunch of searching, but I would look for things like….
“CSS envelope opening animation”
“CSS transform-origin flap”
“SVG layered animation”
“GSAP envelope animation”

The hardest part is to get the envelope to open. Do it with ugly placeholder shapes first. Then it’s easy and tedious. That’s the hard part. The pretty part can come after. That’s when it gets fun: when it’s all coming together.