Music Festival Template 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.
About This Template
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.
What's Included
- 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
Perfect For
- 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.