r/HTML • u/Important_Tap_9276 • 6d ago
Wedding invitation website help
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
3
u/moohah 6d ago
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.
0
u/Important_Tap_9276 6d ago
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?
3
u/anaix3l 6d ago
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.
1
u/Important_Tap_9276 6d ago
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.
3
u/Affectionate_Tea9218 6d ago
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.
1
u/Important_Tap_9276 5d ago
Thanks a ton again for this!!
1
u/Affectionate_Tea9218 4d ago
I’m so curious how you’ve made out. But yeah - of course. “The code of coding:” we all need a little direction. Kind of how everything in life is.
I hope it works out. Sounds like you’re in a good spot. Excited for you. Here if you need anything.
2
2
u/p186 6d ago
If you are a freelancer,and being paid for this work, then you should have an honest conversation with the client and let them know that you need to bring on a dev to help you, or pass on the project. If you are going to be a professional, then you need to act professionally. Part of that is knowing your capabilities and knowing when to not take projects.
If you are at a company, then you should ask your manager for guidance and resources to help you through the project. Part of their role is to foster your development and make sure the client receives a quality product that meets their requirements.
Good luck.
1
u/Important_Tap_9276 5d ago
I’m doing this for free as a gesture for a friend and if it turned out bad she already has a backup haha but i want to give it my best before that
2
u/Affectionate_Tea9218 6d ago
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.
1
u/Important_Tap_9276 5d ago
Thanks alottt for this, this is literally all i needed a direction and some motivation🫡
1
u/AbsolutePandemonium 5d ago
Just to be straight with you: if you're not already at least a high-level designer, you are not going to pull off this project at the level of quality shown in the example.
Maybe if you were, you could try using something like Framer and a few other tools to get there with little to no coding experience, but it will still take technical thinking and problem-solving. You'd still need to learn those tools.
Too ambitious as a first project. Start making stuff for yourself without the pressure; that's the only way you get good at breaking down projects and estimating what you can do with any accuracy.
Even if you use a tool like Framer, it will cost you money to do it, given that you will need to do a tonne of revisions, and you need to already be a good designer to get this right; otherwise, the AI won't really help you.
-1
u/ShopNo7513 6d ago edited 5d ago
If you need help, you can always vibe-code it! /s
1
u/Important_Tap_9276 5d ago
I won’t be proud of that haha would’ve done it maybe if i was getting paid
1
u/ShopNo7513 5d ago edited 5d ago
True! Mostly a joke though. Respect for trying to learn it yourself! My recommendation is that if you just want it to go to the website after playing the animation, I would just use what you are comfortable with. I honestly am not a fan of doing CSS animations manually as that can get a bit tedious for more complex animations. You can make the animation in Canva as a video, then display that video on the page by setting the width and height to fill the screen. Just make sure the controls are hidden. Then I'm pretty sure the click will trigger on it's own, but if not you an use some simple JavaScript to play/pause the video with your own actions. If you want your form to fade in, you can always add a CSS transition to fade into the form. Looking at the video you attached you can also use JavaScript to just add the rest of the website underneath the video and then use some clever CSS to make the styles match the video with the same look and feel. Keep in mind that you can't auto-play a video that has audio without user interaction as the browser will block you.
As far as hosting, if it's just temporary just find a cheap web host online. Lots are free for static HTML. Then get a domain for it and connect it.
Hope that helps!
1
8
u/JohnCasey3306 6d ago
This is quite complex for a first project ... Doing a quality job (as a first-timer) is gonna be close to impossible.