Fitness Gym

Quick Start

Upload the folder to any static host and open index.html. Keep the eight HTML files beside assets/ so relative links keep working. There is no build step, framework or package to install.

Serve the files over HTTP or HTTPS to see the page transitions. While editing, use any local static server (for example python3 -m http.server in the folder) and open http://localhost:8000/index.html. Opening a file straight from disk works too, but links then load pages normally without the transition.

GSAP and its Flip plugin load from a CDN and the font from Google Fonts. Images, styles and the script are bundled locally.

Using It With Your Own Design

1. Identity. Replace "SPLIT", "Athletic Club", the address, phone number, opening hours and the fictional-club note in the header and footer of each page (they are repeated in all eight files so each page stands alone).
2. Photographs. Swap the files in assets/img/ keeping the names, or change the paths. Keep them black and white: the red of the clock is meant to be the only colour on the page. Update alt text to describe what your photographs actually show.
3. Classes. Rename the three class pages for your own classes: a boxing gym might use boxing.html, conditioning.html and sparring.html. Update their links in the classes index, home lanes, footer, timetable chips and the booking form's options.
4. Timetable and prices. Edit the timetable rows, the countdown's session list on the home page, each class page's next sessions and the plans on the membership page (see Next Class and the LED, and Timetable).
5. Colour and type. Edit the colour tokens at the top of assets/style.css (see Palette). Change the Google Fonts link in each page if you change the typeface.
6. Booking. Connect the free-session form to your own service before taking real requests (see Free Session Form).

Everything visual lives in assets/style.css; everything interactive lives in assets/script.js, organised as one function per feature that returns early when its markup is absent. assets/page-router.js is the small page router underneath the transition (link handling, fetching, history, scroll and focus); you should not need to edit it. Delete a section from the HTML and the rest keeps working.

Pages and Configuration

File	Content
index.html	Hero photograph with the headline in chalk blocks and the live next-class clock over its lower edge; "The floor" figures; five class lanes; a compact class player; this week's benchmark workout and board; coaches strip; first-session band
classes.html	The five classes with length, intensity meter and level, filtered by goal; ?goal=race pre-selects a filter
hybrid.html, engine.html, strength.html	Class pages, the same structure on purpose: block-title hero, facts, class player, the blocks in plain words, kit, the coaches who lead it, next sessions this week, a first-session band and previous/next class links
timetable.html	The week as a seven-column grid (one day at a time on phones), class filter chips and an LED "now" line; ?class=engine pre-selects a class
membership.html	Free first session with its request form (#free-session), plans, house rules, FAQ and directions
coaches.html	The seven coaches as a start list: portrait, role, classes, one benchmark in LED digits and a line in their own words; each has an anchor (coaches.html#dee)

Hooks you will meet in the markup:

• data-page wraps each page's header, main and footer: it is the part the sled pushes, and what the transition fetches from the next page.
• data-led="6:41" on any element draws its text as LED digits (digits, colons and points); the text stays readable to screen readers and shows as plain text without JavaScript.
• data-next-class is the home page clock; its schedule is the JSON block inside it.
• data-player wraps a class player; data-length="50" is the class length in minutes. Each block is an <li data-block data-start="10" data-end="24" data-name="Run and ski" data-cue="Run 400 m. Ski 500 m. × 3."> with one photograph, and the data-done item is the end frame.
• data-timetable, data-filter="engine" (chips) and data-class="engine" data-start="06:00" (rows) drive the timetable. data-timezone="Europe/London" sets the gym's time zone for the clocks.
• data-class-filter, data-goal="race" (chips) and data-goals="race conditioning" (cards) drive the classes filter.
• data-sessions lists a class page's next sessions; each row has data-day="mon" and data-time="18:30" and the next one is marked automatically.
• data-free-form and data-request are the booking form and its request summary.
• data-js-only marks controls that only work with the script (filter chips, day buttons, player controls); they are hidden without it.

Page Transitions

Every same-origin link to a sibling .html page runs the sled push:

1. Brace. Within a frame of the click, the sled's front plate (a rubber bar about 60px wide) appears at the right edge and the page braces against it, nudged about 3.5% to the left with a small tremble. It holds there until the next page is fetched and its main photograph decoded; with the page already prefetched the brace lasts about 0.14s and the strain is barely visible.
2. Push. The new page is driven in from the right like a weighted sled, joined to the old page at the plate and shoving it off to the left. It starts slow and heavy (the first ninth of the distance takes a third of the 0.8s push), gathers speed, then slams to a stop with 6px of overshoot and an immediate settle. No spring, no wobble.
3. Lane and split. During the push a narrow lane strip runs along the bottom edge: white lane lines, a tick every metre and labelled lines at 0 M, 5 M, 10 M, 15 M and 20 M, streaming past faster than the pages so the distance is felt. A small LED split above it counts the metres and ticks the time from the click, freezes on arrival (for example "20 M 01.07") and fades within about 0.6s. It is the only clock in the transition.

Back is a sled pull. The previous page is hauled in from the left in three hand-over-hand pulls (a quick jerk of about 0.17s, then a pause of 0.08s, three times) while the current page leaves to the right, with the lane running the other way and the split on the right. Forward through history pushes again. Scroll positions are restored, and the arriving page's heading receives focus and is announced. With the next page prefetched (links prefetch on hover, focus and touch) a push takes about 1.07s from click to rest and a pull about 0.93s.

Notes for editing:

• Pages are fetched, not reloaded, so scripts inside a fetched page do not run. Put new behaviour in assets/script.js as another init function called from initPage. Every page loads assets/page-router.js before assets/script.js; keep that order on a new page.
• The sled itself is the leave, hold, destroy and enter functions passed to PageRouter.create at the end of assets/script.js; the header comment of assets/page-router.js lists everything they receive.
• Any sibling HTML file with a data-page wrapper joins the transition automatically. Add data-native-navigation to a link or container to opt out; downloads, new-tab clicks, external links and same-page anchors already behave normally.
• While it is pushed off, the old page is a fixed layer showing exactly what was on screen, and its clocks and player keep running until it has gone.
• Timing lives in the constants at the top of the transition section: BRACE (0.14s), PUSH (0.8s), PULL and PULL_REST (each pull and pause), JOLT (overshoot in px), LANE_SPEED and METRES (the lane). The plate width is set in .sled-bar in the stylesheet.
• The latest click wins: if another destination is chosen while the page is still braced (for example Back before the push starts), it goes straight there without showing the page in between. A click during the push lets that push land quickly and then pushes on to the latest destination. Back or Forward mid-transition settles on the page the browser asked for. Resizing the window mid-transition finishes it quickly.

Next Class and the LED

The home page clock counts down to the next session in the JSON list inside data-next-class: one ["mon", "18:30", "Hybrid", "Dee"] entry per session, Monday to Sunday. It shows hours, minutes and seconds, names the class and coach, and its link opens the booking form with that session selected. On load the segments power up with a short irregular flicker (skipped with reduced motion). The clock pauses when it is off screen or the tab is hidden.

That list duplicates the timetable on purpose so the home page stands alone. When your week changes, update it in two places: the rows in timetable.html and the list in index.html (and the next sessions on each class page).

All clocks are drawn by one small renderer, makeLed, in assets/script.js: seven segments per digit, unlit segments at 12% of the red, lit segments with a faint bloom.

Class Player

Each block is a list item with its minutes, name, cue and photograph (see the hooks above). Play runs the class at PLAY_SECONDS (25) for the whole length; at each block boundary the photograph changes with a hard cut and the cue appears as a red caption. The block bar, its labels and the jump buttons beside it are built from the list, so changing the minutes is all it takes to reshape a class.

• Mouse: drag anywhere on the bar, or click a point on it.
• Touch: a sideways swipe on the bar scrubs; a vertical swipe that starts on the bar still scrolls the page; a tap seeks.
• Keyboard: the bar is a native range input. Arrow keys move a minute, Page Up and Page Down five, Home and End jump to the ends.
• Reduced motion: no ticking playback; the button steps from block to block.
• Without JavaScript: the blocks are an illustrated list with their times and cues.

The player pauses when it scrolls off screen or the tab is hidden.

Timetable

Rows are authored in timetable.html, one <li class="tt-row"> per session, grouped by day. Each links to membership.html?class=hybrid&time=mon-1830#free-session, which pre-selects that session in the form. The chips filter by class with a quick reflow, today's column is marked and shows an LED line at the current time, and phones get a row of day buttons. Without JavaScript the whole week shows as a grid.

Free Session Form

The form on membership.html collects a name, email, optional phone number, the class and time, experience, goals and health notes. It is an unwired static front end: submitting it shows a written request the visitor can copy or open in their own email app, and nothing is sent from the page. Before taking real bookings, either set the form's action to a form service such as Formspree or Netlify Forms (and remove data-free-form so it submits normally), or replace it with your booking system's widget (Glofox, TeamUp, PushPress, Mindbody and others). Change the address in data-to and the email links.

The session options are grouped by class. ?class=engine selects "Engine, any session", and ?class=engine&time=tue-1830 selects that exact session.

Palette

Token	Default	Purpose
--chalk	#ECEBE6	The page ground
--paper	#E2E1DB	Timetable rows, form panel and fields
--rubber	#111111	Dark bands, clock faces, the footer, the sled's plate and lane
--ink	#111111	All text on chalk
--iron	#57574F	Secondary text on chalk
--smoke	#A9A9A2	Secondary text on rubber
--night	#000000	The player screen and the request summary
--led	#FF3B1F	Lit segments, label blocks, buttons and red text on rubber

Colours with a matching -rgb triple are used for translucent values; change both. Measured pairs are recorded at the top of assets/style.css: ink on chalk 15.8:1, iron on chalk 6.1:1, smoke on rubber 8.0:1, red on rubber and rubber on red 5.3:1. The red is never used for text on chalk (2.98:1); there it appears only as solid blocks carrying dark text. If you choose a new accent, keep at least 4.5:1 against the rubber in both directions.

Type is Pathway Extreme, one variable family: display at width 75 and weight 880 in caps, labels at width 100 and weight 700 in spaced caps, running text at width 100 and weight 400. Two local fallback faces at the top of the stylesheet (Pathway Fallback) are sized to it, so text wraps the same while the web font loads and the page does not jump when it arrives; retune or delete them if you change the typeface.

Accessibility and Fallbacks

• Real links everywhere, a skip link, visible focus, labelled form controls and one h1 per page.
• The sled, its lane and its split are aria-hidden. Scrolling is held while a transition runs; the arriving heading is focused and announced through a polite live region.
• The clocks are drawn in SVG with aria-hidden; each has a text equivalent (the countdown has a screen-reader sentence that updates once a minute).
• The player's bar is a native range input with a spoken description ("Minute 18 of 50: sleds"); block changes are announced politely. Filter chips and day buttons are buttons with aria-pressed.
• Reduced motion swaps pages instantly with no sled, lane or split, skips the clock's power-on flicker and the count-up figures, and steps the player block by block. The clocks still tell the time.
• Without JavaScript every page is complete: the hero clock shows a plain line about class times, the player is an illustrated list, the timetable shows the whole week, and links load pages normally.
• If the GSAP CDN is unavailable, content stays visible, links load pages normally, and the clocks, player, filters and form still work without animation. Opening from file:// keeps everything except the transition.

Dependencies

The demo is pinned to GSAP 3.15.0 with the Flip plugin. Compatibility floor: GSAP 3.12+, with core and plugin on matching versions. No ScrollTrigger, no Lenis, no other plugins, no backend.

Images and Credits

The download contains 31 cropped WebP derivatives in assets/img/, all graded to black and white with firm contrast and a little grain so the set reads as one. Third-party brand marks and printed text (sponsor banners, flags, a painted wall logo, clothing and shoe logos, plate lettering, road signs and whiteboard writing) were retouched out of the stock photographs; the edits are limited to those marks.

Training photography is licensed through Pexels, which permits use in website templates. The photographs show unrelated people and places, not SPLIT's members or staff.

File	Source	Subject
hero.webp	Pexels 9958673, Amar Preciado	A class training in a warehouse gym, a member setting up a deadlift in the foreground
hybrid-hero.webp	Pexels 16966331, Ardit Mbrati	Four athletes in weighted vests running across a hall
class-hybrid.webp	Pexels 16966331, Ardit Mbrati	Crop of the same photograph for the class card
engine-hero.webp	Pexels 6388525, Tima Miroshnichenko	Two members on air bikes in a hazy hall
class-engine.webp	Pexels 6388525, Tima Miroshnichenko	Crop of the same photograph for the class card
strength-hero.webp	Pexels 18187617, Ardit Mbrati	Overhead squat with a coach crouching alongside, an LED clock on the wall
class-strength.webp	Pexels 4720777, Ketut Subiyanto	An older member braced over a loaded barbell
class-foundations.webp	Pexels 6740297, Mikhail Nilov	A coach demonstrating a squat to a new member
class-open-gym.webp	Pexels 7672092, cottonbro studio	Pull-ups on a wall-mounted bar against brick
hybrid-warmup.webp	Pexels 6150627, AirFit	A group warming up outdoors with high knees
hybrid-run.webp	Pexels 37858833, Operaciones Lima	Five runners under a road bridge
hybrid-sled.webp	Pexels 37955628, CRISTIAN CAMILO ESTRADA	A woman driving a loaded sled
hybrid-wallball.webp	Pexels 4853908, Ketut Subiyanto	Two members squatting with medicine balls
engine-bike.webp	Pexels 6389076, Tima Miroshnichenko	A member riding an air bike by tall windows
engine-row.webp	Pexels 16966341, Ardit Mbrati	Rowers pulling hard side by side
engine-flush.webp	Pexels 4047246, ShotPot	A member lying on the gym floor after the last interval
strength-prep.webp	Pexels 39219694, Vitaly Gariev	Two members swinging kettlebells by a window
strength-squat.webp	Pexels 4720782, Ketut Subiyanto	An older member with a barbell across his shoulders
strength-press.webp	Pexels 2261485, Victor Freitas	A member pressing a barbell overhead, seen from behind
strength-lunge.webp	Pexels 16551903, Jonathan Vijayakumar	A member lunging with a sandbag on his shoulders
class-done.webp	Pexels 6740312, Mikhail Nilov	A coach and a member high-fiving
community.webp	Pexels 6539881, RDNE Stock project	Three members of different ages laughing together

The seven coach portraits (coach-dee.webp, coach-kofi.webp, coach-marta.webp, coach-tom.webp, coach-aisha.webp, coach-bev.webp, coach-ravi.webp), the railway arches (arches.webp) and the ski erg class (engine-ski.webp) are AI-generated images of people and a building that do not exist, made for this template. Replace the portraits with photographs of your real team before launch; never present generated portraits as real staff.

To replace an image, keep its filename or update every path, its width/height and its alt text. The Vault authoring source includes assets/img-manifest.json with original URLs, crops and provenance; in the Vault checkout it regenerates with bun scripts/build-template-assets.ts fitness-gym-template --force. The manifest and source files are authoring inputs; your site only needs the files in assets/img/.