# Hopla, a free trampoline park website template > Website for a trampoline park or indoor family activity venue. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). A one-page site for an indoor trampoline park with zones, sessions, birthday parties, a café, a league table, prices and booking. Cream, red and yellow fields with wobbly trampoline-bed edges and big condensed type; the page bounces as you scroll: a jumper is launched off the first screen, photo discs hop down the zone list and a red ball hops along the party route. - Page: https://8b.com/templates/hopla/ - Live demo: https://8bsite.github.io/trampoline-park-website-template/ - Repository (GitHub template): https://github.com/8bsite/trampoline-park-website-template - Download ZIP: https://github.com/8bsite/trampoline-park-website-template/archive/refs/heads/main.zip - Size: 126 KB, 28 photos (Unsplash), fonts: Bricolage Grotesque, Playpen Sans and Rethink Sans - Motion: GSAP 3.13.0 (ScrollTrigger, SplitText, MotionPath); Lenis 1.3.27 smooth scroll ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/trampoline-park-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/trampoline-park-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/trampoline-park-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/trampoline-park-website-template/main/CREDITS.md ``` Then: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a site for . Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, prices, hours, links and contacts, and recolour it through the CSS variables if needed. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/trampoline-park-website-template my-site`. ## Design Hopla is a trampoline park website template for an indoor venue that sells sessions, passes and birthday parties. The demo is a Sheffield steel shed with zones, a timetable, parties, a café, a league table and prices; it also suits a soft play centre or a ninja park. - Palette: #f5e3cd (cream page background), #e2130f (red headings, buttons and red bands), #1b1b1b (text and the dark league band), #ffd750 (yellow stickers and yellow bands), #f4a804 (amber party route and timetable shade), #ffffff (white outlines on headings and photo frames) - Fonts: Bricolage Grotesque (headings and buttons: condensed, extra bold, uppercase, outlined in white), Playpen Sans (wordmark and stickers: rounded and hand-drawn), Rethink Sans (body text, times and labels) Each band opens with a wavy edge like a slack trampoline bed and switches colour: cream, red, yellow, black. Headings are huge and outlined in white. Photos sit in round discs or tilted white frames, sessions and passes are cut like tickets with dashed tear lines, and pill stickers sit at an angle. ## Sections and motion - **Navigation** (navigation): fixed top bar: wordmark, Book button, Menu button opening a full-screen link overlay with contacts - **Bounce at Hopla, the trampoline park in Sheffield** (opening): first screen: one giant word with a photo of a jumper in front, wordmark, two stickers, two short texts; then a red panel with heading, button and three tilted photos. Motion: Smooth scrolling throughout; wavy edges wobble and stickers slap on page-wide. As the red panel rises over the held first screen, the jumper lands on its edge, which sags and flings them off spinning. - **One roof, six ways off the ground** (zones): list of six activity zones in a zig-zag: big name, one line, age sticker, round photo (demo: trampoline zones). Motion: Tied to scroll, each round photo hops along an arc from the zone above and squashes as it lands. - **The best bit is the middle** (airtime): full-width photo with a two-line statement held on screen while you scroll. Motion: The photo stays pinned and zooms out while the two heading lines rise at different speeds, tied to scroll. - **One shed, five crowds** (sessions): timetable of five sessions as tickets: time, name, text, ages, photo (ground turns from morning yellow to night). Motion: As you scroll the timetable, the ground shifts from morning yellow through amber and red to night black, and the Glow Night ticket lights up. - **Birthday parties, sorted** (parties): birthday parties: heading, text, price line, button, and a five-step route with numbered tilted photos. Motion: Tied to scroll, a red ball hops along the dashed route from photo to photo, drawing a trail; each photo bumps as it lands. - **The Landing** (landing): on-site café: wide photo, round coffee photo, sticker, text, short price list - **Ninja Wall League** (league): ranking table of six results on a dark field, with heading, text, entry link and photo (demo: ninja wall times). Motion: Rows start in last Sunday's order and slide into this week's ranking as you scroll the table into view. - **House rules, short version** (rules): red wall of five tilted rule stickers and one photo (house rules) - **Pick a pass** (prices): five ticket-shaped passes with name, price and one line, plus two buttons. Motion: The five passes start fanned in a stack like a hand of cards and deal out into a row as you scroll. - **Asked a lot** (faq): questions and answers (native
) next to a heading and a phone line. Motion: A big red question mark hops down the list from question to question as you scroll, squashing on each. - **Come and jump** (contact): address, opening hours, phone, email, directions and a booking request form (placeholders) - **Footer** (footer): links, address and phone, copyright with the Design: 8B credit, a giant outlined HOPLA wordmark with three round photos. Motion: The giant outlined HOPLA drops in letter by letter, squashing on landing, while three round photos bounce into place. ## Good for - trampoline park or bounce centre - indoor play centre or soft play - climbing, ninja or adventure park - kids' party venue - any family leisure venue with sessions, passes and bookings ## Questions **Does the booking form send requests?** Not yet. It asks for name, email, date, number of jumpers and session and shows a thank-you, but sends nothing until you connect a form service such as Formspree or Netlify Forms. **How do I change session times and prices?** They are plain HTML text: each session ticket has a time, name, one line and an age group, and each pass a name, price and line. Edit them in index.html. ## Before publishing Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.