Seasonal Menu Index

Quick Start

Keep index.html beside assets/ and serve it through your usual local/site server. For an existing page copy the complete section.smi-section, then include:

Code snippet omitted: it ships with the download.

Adjust the paths for your page. GSAP core is the only animation dependency. The standalone HTML's body { margin: 0; } belongs to the preview; the section CSS uses scoped selectors and root-local variables.

Make it yours

Edit restaurant name, headline, hours, courses, dishes, descriptions, prices and dietary information directly in the HTML. Replace the .smi-enquiry example mailto:hello@aldertable.example with your booking page, contact or anchor. A reservation backend is not included. Replace the fictional disclosure when supplying your own content, while preserving disclosures appropriate to your imagery.

Each .smi-plate in .smi-gallery is an ordinary semantic figure. Change its image src, alt, intrinsic width/height, caption and data-label/data-photo-title. Runtime derivatives are in assets/img/. Standard srcset/sizes may be added to your image markup. The default frame is 4:3 with central focus; override --smi-photo-ratio and --smi-photo-position on the root or an individual frame to suit other source shapes. Motion acts on the print frame, so photo replacement needs no animation edits.

Add, remove or reorder figures directly. Choices, layering and count derive from the markup. Three to five prints suit this composition; there is no scripted fixed count. A single print has no meaningless choices or drag prompt. Courses and .smi-dish list items can likewise be added, removed or reordered without JavaScript changes.

The root block of assets/style.css contains colours, display/body fonts, maximum content width, gutters, spacing, photograph ratio and focal position. For example:

Code snippet omitted: it ships with the download.

Check contrast when rebranding. The opaque default ink, secondary and olive text pairs exceed 7:1 against the warm white ground. Captions sit on paper below photographs. Change heading tags to suit your host without changing their class names.

Animation controls

data-photo-duration="0.72" on the root sets the elastic settle in seconds, clamped to 0–1.2. Drag any exposed print horizontally; fast movement adds restrained velocity tilt. Release beyond the distance/velocity threshold advances the fan. Click or tap any exposed photograph to lift it clear of the fan, sweep it into the foreground and spring it into place while the other prints rearrange. The native choices use the same two-phase animation; selecting the current print gives it a small lift and settle. New drag, photo click or choice input interrupts the old timeline immediately and resolves to the latest input. The native dish buttons provide an alternate path; focus a choice and use Left/Right, Home/End, Enter or Space. There is no auto-play or ambient loop.

Vertical touch gestures remain available to the host page through touch-action: pan-y. The section does not install smooth scrolling, pin content, replace a cursor or change host navigation. Named container queries recompose the menu and print sizes in narrow columns. Section height follows its content.

Lifecycle and accessibility

The public API is independent per root:

Code snippet omitted: it ships with the download.

mountAll(scope) mounts descendants of an optional scope. Repeated mounting is idempotent. Teardown removes only owned listeners, observer, generated choices and GSAP work, restoring original figure IDs/styles and every photograph in readable flow. Separate roots operate independently. Native buttons have unique instance targets, current aria-pressed state and visible focus. All semantic captions remain available.

With reduced motion the photographs return to ordinary readable flow and optional controls are hidden. Preference changes while mounted are supported. No JavaScript or missing GSAP also shows all photographs, captions and the complete menu. Nothing pre-hides content. Only GSAP's own scoped contexts are reverted; unrelated host animations remain intact.

Dependencies and credits

• GSAP core, built against 3.15.0; compatibility floor 3.12+. Review GSAP licensing.
• DM Serif Display and IBM Plex Sans Condensed from Google Fonts, under the SIL Open Font License; you may self-host under their licences.
• Three generated food photographs depict fictional sample dishes, not documented restaurant portions or client results. Runtime uses local optimised derivatives; replace them with photographs you have permission to publish.

Copy the section root, its CSS/script and local images. Reference screenshots and authoring notes are not buyer dependencies.