# Wedding Template

> A wedding one-pager with one job — getting guests to RSVP — built as a stationery suite on champagne and card stock, with a reply card that writes itself in typewriter text and posts itself in an envelope on submit.

Canonical: https://gsapvault.com/templates/wedding-template
Live demo: https://gsapvault.com/demos/wedding-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | scroll-reveal, stagger, text-animation, typewriter, 3d-transforms, scrub |
| Uses Lenis | Yes |

## Overview

A complete one-page wedding site whose every section funnels guests toward one act: the reply. No script lettering, no wall of stock photography — the page is a stationery suite, a champagne envelope lining as the ground, near-white card stock for the invitation plate and the reply card, espresso ink and one antique gold in wax-seal territory. Photography is held to a single black-and-white print of the couple, laid over the corner of the invitation plate with a pencil-note caption, ready to be swapped for your own. It looks designed and full on first open, and three more complete palettes — powder blue, blush, sage — ship in the stylesheet as a one-attribute swap; the print's baked monochrome grade sits with all of them.

The signature is the reply card that writes itself. The RSVP form sits beside a styled reply card, and as a guest answers each question — names, accepting or declining, a choice of three mains, dietary notes, a song request — the card fills in live, line by line, in typewriter text. On submit the card folds into an envelope, takes a stamp and a postmark, and posts off the page, followed by a plain confirmation.

Everything else is deliberately quiet: a letter-spaced reveal on the names, a timeline of the day whose spine draws as it is read, travel notes, three suggested hotels as place cards, a short Q&A and a modest gifts note. Swap the names, date, venue and menu, point the form at Formspree or any endpoint, and deploy it as static files.

## Features

- Complete deployable one-pager: invitation-plate hero, timeline of the day, travel and stay, Q&A and gifts, RSVP, footer
- Signature reply card that mirrors the form live, typing each changed answer in character by character — never retyping the whole card
- On submit the card folds into an envelope, takes a stamp and a postmark, and posts off the page before a plain confirmation
- The form is a real, working plain form: point its action at Formspree, Netlify Forms or any endpoint and it submits with or without JavaScript
- Formal centered invitation plate with double-rule frame, letter-spaced engraved caps, a reply-by chip and a button straight to the RSVP
- Timeline of the day with a spine that draws down the page as it is read, times set in typewriter mono
- One photograph by design: a black-and-white print of the couple, mounted and captioned, its baked monochrome grade at home in every palette — the rest is art-directed CSS and SVG stationery (card, envelope, stamp, postmark, botanical rule, line-art barn)
- Declining folds the supper, dietary and song questions away and disables them, so a decline never posts a main course; accepting brings them back, answers intact
- Reply card stays in view while the form is filled, sticky beside it on desktop and compact above it on phones
- Four ready palettes — champagne gold, powder blue, blush, sage — swapped with one attribute, every pair measured to WCAG AA; the RGB-triple token block makes a custom reskin a four-value edit
- Lenis smooth scrolling wired in and fully optional
- Accessible: the decorative card is aria-hidden, the confirmation lands in an aria-live region and takes focus, validation is native, and reduced motion gets instant card updates with a static confirmation swap

## Use Cases

- Wedding websites whose main job is collecting RSVPs
- Civil partnerships, vow renewals and anniversary parties
- Any invitation-and-reply event: christenings, milestone birthdays, retirement parties
- Save-the-date pages that will grow into the full invitation
- Learning how to mirror a form into a live, animated preview with GSAP

## How It Works

### Structure

One script initialises each section inside a single gsap.context with gsap.matchMedia, keyed only on reduced motion so exactly one branch runs on every device. Every querySelector is guarded, so any section — the timeline, the hotels, the whole RSVP — can be deleted and the rest keeps working. Reveal start states are double-gated behind a has-js class and the motion media query, so a blocked CDN or a reduced-motion preference both leave a complete static page.

### The reply card

The form is the real interface and the card is an aria-hidden mirror. Each input names the card line it feeds through a data attribute; radios update on change and text inputs wait 350ms for a pause. Only the changed line is retyped: a small tween counts an index up the new string's length and slices it into the line's textContent, with a blinking caret while it runs, so the card reads as being typed rather than re-rendered. Declining folds the accept-only questions (supper, dietary, song) away in a height tween and disables their inputs, so a decline never posts a main course; accepting unfolds them with their answers intact.

### Posting the envelope

Submit builds one timeline: the card scales down, the envelope rises to meet it, the card slips inside, the flap sweeps closed, the stamp thumps on with a little jolt of the envelope, the postmark cancels it, and it posts off the page. The envelope's CSS centring is restated as the same xPercent/yPercent GSAP tweens around, so no transform property fights another. If the form's action points at a real endpoint, the reply is POSTed first and the send only plays once it has actually sent; a failure re-enables the button and shows a written error instead.

### Accessibility and reduced motion

The fold never hides the outcome: the form column is made inert during the animation, the confirmation lands in an aria-live region and receives focus, and validation is the browser's own. Under reduced motion the card updates instantly with no type-on, and submitting swaps straight to the confirmation — no fold, no envelope.

### Without JavaScript

The page renders complete: every section readable, the card sitting as static printed stationery with empty ruled lines, and the form a plain working form that submits to whatever its action attribute points at. The envelope never appears at all. The README documents wiring the form to Formspree, Netlify Forms or a mailto fallback, and where to change the names, date, venue and menu.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

1. Open `index.html` and change the obvious things: the names (hero, nav monogram, footer, the reply card's `M & E` headers, the envelope address), the date, the venue, and the reply-by date. Search for `Martha`, `Elliot`, `Foxhill`, `12 September` and `31 July` — those five searches find every instance.
2. Replace `assets/img/couple.webp` with a photo of you two, and rewrite the print's caption in `index.html` — see **The photograph** below.
3. Rewrite the copy in your own voice: the timeline of your day, your travel notes and hotels, your Q&A. Delete whole sections freely — the script skips anything it can't find.
4. Point the form somewhere real — see **Wiring the form** below. Until you do, submitting plays the animation but records nothing.
5. Swap `script.js` for `script.min.js` before you go live:

```html
<script src="assets/script.min.js"></script>
```

### Accessibility

- The reply card and envelope are `aria-hidden` decoration; the form is a standard labelled form with native validation (`required` on name and attendance).
- The confirmation is an `aria-live="polite"` region and receives focus when it appears, so the fold never hides the outcome from a screen reader or strands the keyboard; the form column is made `inert` during the animation.
- Reduced motion (both the CSS media query and the GSAP matchMedia branch): no reveals, no type-on — card lines update instantly — and submitting swaps straight to the confirmation with no envelope.
- Without JavaScript the page renders complete and static, and the form submits natively to its `action`.
- All type meets WCAG AA on every surface it appears on, measured composited; the table is in the stylesheet header.

### Browser Support

Modern browsers (ES5 syntax, but clip-path, `inset` and `:focus-visible` assume evergreen). Not compatible with IE11.

### Dependencies

- GSAP 3.12+ (core)
- ScrollTrigger plugin
- Lenis (optional — smooth scrolling; the page works without it)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Wedding Template](https://gsapvault.com/templates/wedding-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt