131
AI ready

Envelope Advent Calendar

£7 or the whole Vault, £79.20

An advent calendar of paper envelopes pinned to a cork board. Choose a day and its envelope lifts out of the grid, the flap folds back in 3D and what is inside slides out: a note that unfolds, or a vertical video clip that starts playing. Optional date lock, three paper themes.

advanced
9 more details
3d-transformspaper-folddialog-animationfocus-managementvideo-playbackinterruptible-transitionstheme-switchkeyboard-navigationtoken-theming

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Envelope Advent Calendar demo in new tab

Released

About this effect

A countdown that feels like opening real post. Twelve paper envelopes lie on a cork board, back side up, each a little crooked as if it was placed by hand, with a small numbered seal on the tip of its curved flap. Choose one and it lifts off the board towards you and into the middle of the screen while the rest of the board dims.

Read the full effect overview

The flap then folds back in true 3D about its top edge, darkening as it stands on end and passing behind the envelope once it is past upright, so you see the inside of the pocket and what is waiting in it. The contents slide up out of the pocket and come forward. A note arrives folded once and opens up into a readable card; a video arrives as a vertical, phone-shaped clip and starts playing as soon as it is out.

Close it with the button, Escape or a click on the board, and everything runs back: the clip pauses, the contents slip back in, the flap closes and the envelope settles into its place, its seal now broken and its flap left slightly ajar, so the board shows how far through the month you are.

Each day is ordinary markup, a button and the contents beside it, so the same calendar works for 12 or 24 days, for a wedding countdown, a product launch or a birthday week. Three themes ship as custom properties: mixed off-white, kraft and stone paper on grey (the default), red and green advent paper on cork, and ivory, blush and sage for a wedding.

Envelope Advent Calendar - GSAP animation effect preview

What's included

14 items
  • Real-feeling paper envelopes: curved-tip flap, side and bottom flap seams, a fibre texture, a cast shadow under the flap and a numbered seal
  • Hand-placed scatter: every envelope sits at its own slight angle and offset, the same on every visit
  • Lift and centre: the chosen envelope rises out of its slot towards the viewer while the board dims behind it
  • True 3D flap fold about its top edge, with shading across the fold and the flap passing behind the envelope once it is past upright
  • Contents slide out of the pocket and come forward: notes unfold from a single fold, videos play as a 9:16 clip card
  • Videos load only when their envelope opens, start muted, and pause when it closes; a play and pause control and a sound toggle are built in
  • Opened envelopes keep a broken seal and an ajar flap, optionally remembered between visits
  • Optional advent date lock: locked days show a small padlock, shake when chosen and announce the date they open
  • One open at a time; fast clicks, Escape mid-animation and reopening all reverse or finish the timeline cleanly
  • Three themes as custom properties (neutral, advent, wedding), switchable at runtime
  • Accessible modal dialog: native buttons with spoken day and content type, focus moved in and restored, focus trapped, Escape closes
  • Reduced motion: no lift or fold, contents fade in place and videos wait for a press of play
  • Phone layout: a 3 by 4 board and contents shown as a near full-width sheet
  • Small API: open, close, reset and revert, plus open, close and locked events

Perfect for

5 use cases
  • Advent calendars for shops, cafés, charities and newsletters, with a daily offer, recipe or clip behind each door
  • Wedding countdowns and guest pages, one envelope per week or per message
  • Product launch or event countdowns that unlock a teaser a day
  • Birthday weeks, team celebrations and leaving cards with a note or video from each person
  • Course or challenge calendars where each day reveals the next task

How it works

3 sections

Each envelope is a native button. The script adds a few decorative layers to it: the inside of the pocket, the pocket face with its seams, the flap's cast shadow, and the flap itself with an outer and inner face. The curved flap and the seams are clip-path shapes, so the paper scales with the envelope and every colour is a custom property.

Opening builds one GSAP timeline. The envelope's on-screen position, size and angle are measured, and a copy is lifted from exactly there to the centre and scaled up. The flap turns about its top edge with a CSS perspective; as it turns, a fold value derived from its angle shades both faces, and once it passes upright it is moved behind the contents. The contents themselves are moved into the dialog, between the inside of the pocket and its face, so they slide out of the opening naturally before being brought to the front. A note's top half is a folded leaf that turns over to open.

Closing reverses the same timeline, faster, so an interrupted open or close always has a defined way back. The real contents are returned to their place in the page, the envelope is marked as opened, and focus goes back to the button that opened it. Under reduced motion the whole sequence becomes a simple fade, and everything resets cleanly if that preference changes while the page is open.

Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Envelope Advent Calendar opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£7 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the calendar to your <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

The script finds every [data-advent] calendar, dresses each .advent-envelope button as a paper envelope and builds one dialog per calendar. Nothing else is needed: no plugins, no build step.

Using It With Your Own Design

What the effect needs from your markup:

  • A root with data-advent. Themes, the date lock and the remember option are attributes on it.
  • One .advent__slot per day, holding a button.advent-envelope and, right beside it, one .advent-content. The button and its content are paired by sharing a slot, so order and count are up to you: change the grid to 24 days by adding slots and setting --cols and --rows on .advent__board.
  • .advent-envelope__day inside the button is the number printed on the seal. It is moved onto the flap while the script runs and put back on revert().
  • .advent-content with data-kind="note" or data-kind="video". Its .advent-content__title labels the dialog. A note can hold any text; a video needs a video.advent-content__video with a poster and its file in data-src (not src), so nothing is downloaded until that envelope is opened.

What is only the demo's styling:

  • The cork, grey and linen boards, the paper colours and the seals are theme tokens at the top of style.css. Replace the values or add your own [data-theme] block.
  • The theme switch ([data-advent-theme] buttons inside the root) exists to show the three themes. Delete the buttons and the calendar keeps whatever data-theme you set.
  • Newsreader is only used for note text; swap it for your own face in --font-note.
  • The four video clips in assets/video/ are demo placeholders. Replace them with your own.

CSS the effect depends on:

  • .advent-envelope keeps aspect-ratio: 1.42 and position: relative; the injected .env layers fill it absolutely. The flap shape, pocket opening and seams are percentage clip-paths, so any envelope size works.
  • .has-js .advent__slot > .advent-content { display: none } hides the contents on the board only once the script runs. Without JavaScript they show under each envelope as a plain list.
  • The board sizes envelopes with container query units: .advent__board is container-type: size on desktop and the grid reads 100cqw and 100cqh. Give the board a height (the demo fills the viewport) or switch it to inline-size as the phone layout does.
  • .env sets perspective and .env__flap uses transform-style: preserve-3d with two faces. Do not put filter, overflow: hidden or opacity below 1 on .env__flap: any of them flattens the fold.
  • The script owns transform on the dialog's envelope and card and on the injected .env. Each button's scatter is --tilt, --dx and --dy; set them inline to place an envelope by hand.

Options

Set on the [data-advent] root unless noted.

Attribute Values Default Description
data-theme neutral, advent, wedding, or your own neutral Theme tokens. Can be changed at runtime
data-lock dates off Enables the date lock. Envelopes before their data-unlock date stay shut
data-today YYYY-MM-DD the visitor's date Overrides "today" for the date lock, for testing or a fixed schedule
data-remember opened off Remembers opened envelopes in localStorage between visits
data-remember-key string root id, then page path Storage key when several calendars share a page
data-paper (button) a, b, c a Which of the theme's three papers the envelope uses
data-unlock (button) YYYY-MM-DD none The day this envelope opens when data-lock="dates"
data-day (button) string the .advent-envelope__day text Day name used in labels, events and open()
aria-label (button) string generated Your own accessible name; otherwise "Day 5, open note" and similar
data-audio (.advent-content) none sound toggle shown Hides the sound toggle for clips without audio

Theme tokens include --page, --board, --board-texture, --paper-a, --paper-b, --paper-c, --seal, --seal-ink, --backdrop, --note-paper and --note-ink.

Accessibility

  • Native buttons: every envelope is a <button> named with its day and content type ("Day 5, open note"), "again" once opened, or the date it opens when locked (aria-disabled, still focusable so the date can be read).
  • Modal dialog: the opened contents are a role="dialog" with aria-modal, labelled by the content's title. Focus moves to the close button, is trapped inside the dialog, and returns to the envelope on close. The board behind is inert while it is open.
  • Closing: the close button, Escape, or a click on the dimmed board.
  • Video controls: a full-card play and pause button and a sound toggle (aria-pressed), both at least 44px.
  • Reduced motion: no lift, fold or slide. The contents fade in at the centre and videos show their poster until play is pressed.
  • No JavaScript or a blocked CDN: has-js is removed and every day's contents are shown under its envelope as a readable list.
  • Focus visible: envelopes show a white and ink double ring that reads on every theme.

Dependencies

Required:

  • GSAP 3.12+ (the demo pins 3.15.0). No plugins.

Optional:

  • Mona Sans and Newsreader from Google Fonts, or your own faces.

Demo video clips are graded and re-encoded derivatives of Pexels footage (sources in assets/video-manifest.json), included so the demo plays as shown. Replace them with your own clips for production.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.