# Music Festival Template

> An editorial three-day festival site with an interactive vinyl hero, accessible lineup filters, dependable nightly timetables, selectable venue gallery, sponsor logo system, tickets, and practical information.

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

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | text-animation, tabs, filtering, hover-effect, scroll-reveal, stagger, click-toggle |
| Uses Lenis | Yes |

## Overview

A production-ready one-page site for festivals, club nights, outdoor programmes, and cultural weekends, designed with a monochrome editorial system and one restrained oxblood accent rather than a futuristic interface. The oversized hero title sits above a CSS-drawn turntable whose vinyl can be paused or switched between 33 and 45 RPM while the player itself remains fixed. Friday, Saturday, and Sunday lineup tabs keep artists, times, and stages easy to scan; the timetable displays one stable night at a time; the venue gallery uses a clear main image with accessible choices; and a dedicated sponsor band provides correctly scaled partner-logo space. Swap the placeholder artists, dates, prices, logos, and photography for your own event and deploy anywhere as static files.

## Features

- Complete deployable three-day festival site with countdown, hero, lineup, set times, venue gallery, tickets, info, and footer
- CSS-drawn turntable with semantic pause/play and 33/45 RPM controls; only the record disc rotates
- Accessible Friday, Saturday, Sunday, and full-weekend lineup filters with arrow-key tab navigation
- One stable timetable per night with clear tab selection and a reset-to-Friday control
- Selectable venue gallery with one large image, visible thumbnail choices, descriptive captions, and keyboard focus support
- Dedicated presenting-partner and festival-partner logo grids with generous clear space and image sizing rules
- Gentle GSAP entrance and scroll reveals that favour poster movement over digital effects
- Royalty-free Unsplash placeholder photography hotlinked from CDN so nothing is bundled or redistributed
- Editorial art direction using mineral grey, off-white, charcoal, restrained oxblood, monochrome photography, and subtle grain
- Lenis smooth scrolling wired in and fully optional
- Accessible reduced-motion and no-JavaScript fallbacks keep event information readable

## Use Cases

- Festival and club night sites that need to sell tickets
- Gig, tour date, and album launch pages
- Conference and community event one-pagers with a bolder personality
- Product or venue launch parties
- Learning how GSAP Vault interaction effects compose into a full page

## How It Works

The template initialises inside one gsap.context and uses gsap.matchMedia to separate motion from the reduced-motion state. Semantic buttons drive the lineup and timetable tabs by updating aria-selected, tabindex, hidden panels, and a short GSAP opacity/translate reveal. Record controls toggle CSS classes that affect animation-play-state and duration on the vinyl disc only. Gallery buttons update the main image, alt text, title, copy, counter, and aria-pressed state with a brief crossfade. ScrollTrigger is limited to gentle one-time content reveals and the navigation progress line.

## 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` in a browser.** GSAP, ScrollTrigger, Lenis, and the fonts load from CDN.

**2. Replace the festival content:**

- Change the name, dates, location, prices, artist names, set times, and stages in `index.html`
- Add or remove rows inside each `[data-lineup-panel]` and `[data-schedule-panel]`
- Replace the hero and venue photography with your own event images
- Edit the palette custom properties near the top of `assets/style.css`
- Change the event date used by the countdown near the top of `assets/script.js`

**3. Deploy.** The template is static and works on Netlify, Vercel, GitHub Pages, or a plain server. Point `index.html` at `assets/script.min.js` for production.

### Accessibility

- Semantic tabs use `role="tab"`, `aria-selected`, roving `tabindex`, and arrow-key navigation
- Record controls and gallery choices are real buttons with announced state
- `prefers-reduced-motion: reduce` removes continuous and entrance motion
- Without JavaScript, every lineup day and timetable remains present in the document
- Gallery image alt text changes with the selected venue

### Dependencies

- [GSAP 3](https://gsap.com) core and ScrollTrigger
- [Lenis](https://lenis.darkroom.engineering) smooth scroll, optional
- Google Fonts: Anton, Archivo, IBM Plex Mono

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/script.min.js`: minified production build
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- 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 Music Festival Template](https://gsapvault.com/templates/music-festival-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