# Theatre Venue Template

> A complete repertory theatre site with an oxblood playbill identity and a production selector whose stage curtains close, change the show at full cover, then open into a settling house-light glow.

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

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | clip-path, click-toggle, keyboard-navigation, timeline-control, scroll-reveal, stagger |
| Uses Lenis | Yes |

## Overview

A complete one-page site for House Lights, a fictional independent repertory theatre in Sheffield. Oxblood, deep-stage red-black and ticket ivory give it the material language of a printed playbill, while Bona Nova display type and Geologica reading type keep the voice literate, warm and useful. The structure is deliberately theatrical rather than event-like: an asymmetric poster-and-stage hero, a current-production stage, a chronological season ledger, a split house story, practical visit rows, membership and footer.

The centrepiece is a four-show production selector built from real buttons. Choosing a show closes left and right curtain panels across the stage; only at full closure does the title, run, price, synopsis and production photograph change. The curtains then open with a small overshoot while an electric-blue house-light glow settles over the new image. Rapid choices retain only the latest request, and arrow keys, Home and End provide the same selection flow as click and tap.

All four production photographs are bundled, optimised WebP derivatives with fixed dimensions, descriptive alternatives, deep-stage fallbacks and legibility overlays. Buyers can replace the four files without touching the interaction, edit the production rows in one script block, and remove any section independently.

## Features

- Complete deployable one-page theatre site with fixed nav, poster hero, current stage, season ledger, venue story, visit information, membership call to action and footer
- Four-show production selector operated by semantic buttons on keyboard, pointer and touch
- Paired stage curtains close with clip-path, change all production content only under full cover, and open with a restrained overshoot
- Rapid-selection state management keeps the latest requested show and prevents stale timelines from corrupting the stage
- House-light glow settles after every curtain reveal for a layered but restrained finish
- Chronological playbill ledger keeps every production and price readable without JavaScript
- Four robust local production-photo slots with intrinsic dimensions, useful alt text, colour fallbacks and text-legibility treatment
- Measured oxblood, stage, ticket-ivory and electric-blue palette with every translucent value derived from matching RGB triples
- Responsive layouts for desktop and mobile with no horizontal overflow
- Reduced-motion, no-JavaScript and blocked-CDN fallbacks preserve a complete readable page
- Optional Lenis smooth scrolling synchronised with ScrollTrigger

## Use Cases

- Independent theatres presenting a repertory season and current production
- Studio theatres and performance venues needing practical access and travel information
- Producing companies combining ticket sales, venue story and supporter membership
- Arts centres with rotating theatre, dance and spoken-word programmes
- Community venues protecting low-price tickets through a membership appeal

## How It Works

### The repertory stage

Four production rows in the script supply the title, dates, price, synopsis and image relationship, while the HTML carries four real image slots and four semantic buttons. The visible stage is a single accessible content region rather than duplicated hidden panels. Buyers can rename or reorder the season by changing those rows and keeping the button and image order aligned.

### The curtain change

A GSAP timeline animates two oxblood curtain panels from opposite sides with clip-path. The selected production is written only in the callback reached at full closure, then both panels open just beyond their resting inset and settle back while the house-light glow fades to its resting level. If several choices arrive during a run, the current timeline completes safely and immediately serves only the latest requested index.

### Keyboard and motion

The selector uses button elements, visible focus and aria-pressed state, with Arrow Left, Arrow Right, Home and End moving focus and selecting through the same request function used by click and tap. Under prefers-reduced-motion, selections update immediately with no curtain travel, and CSS independently restores every pre-hidden reveal target.

### Without JavaScript

The first production is fully rendered in HTML, its first photograph is visible, and the entire four-show season remains a chronological ledger below it. The synchronous head gate is removed if GSAP or ScrollTrigger fails to load, so blocked CDNs expose the same plain document instead of leaving reveal targets hidden. Each section setup is guarded, allowing buyers to remove sections without breaking the remainder.

## 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. Upload `index.html` and the `assets/` folder to any static host.
2. Replace the four production photographs in `assets/img/` as described in [Photography](#photography).
3. Edit venue and season copy in `index.html`; edit the four production data rows in `assets/script.js` so the interactive stage matches.
4. Keep the GSAP, ScrollTrigger and Lenis CDN tags at the end of `index.html`, or self-host the same versions.

### Accessibility

- The production controls are real buttons with `aria-pressed`, visible focus and one shared interaction path for keyboard, click and tap.
- Arrow Left/Right and Home/End navigation changes the selected production and moves focus.
- The selected title and dates are announced through a polite live region after the stage content changes.
- Every photograph has useful alternative text; inactive production images are hidden from assistive technology.
- Reading colours exceed WCAG AA at their actual opacity and surface combinations.
- Access, travel, ticket and membership information remains ordinary semantic HTML.

### Dependencies

- [GSAP 3.14.2](https://gsap.com/) core
- [ScrollTrigger 3.14.2](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)
- [Lenis 1.3.17](https://github.com/darkroomengineering/lenis), optional and synchronised with ScrollTrigger
- Google Fonts: [Bona Nova](https://fonts.google.com/specimen/Bona+Nova) for display and [Geologica](https://fonts.google.com/specimen/Geologica) for all reading and data

To remove Lenis, delete its CDN tag in `index.html` and the optional Lenis block near the top of `assets/script.js`.

## 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 £10 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 Theatre Venue Template](https://gsapvault.com/templates/theatre-venue-template)
- [Effects & Templates Vault (£39 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