# Strength Gym Template
> A complete one-page site for a barbell club or strength gym, built around a one-rep-max calculator that prescribes every week of a twelve-week block and draws the plates you actually have to load.
Canonical: https://gsapvault.com/templates/strength-gym-template
Live demo: https://gsapvault.com/demos/strength-gym-template/index.html
| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | ScrollTrigger, Draggable |
| Techniques | draggable, scroll-reveal, stagger, text-animation, parallax, scrub, click-toggle |
| Uses Lenis | Yes |
## Overview
A production-ready site for a strength gym, a powerlifting club or a coached barbell programme, laid out as a training block rather than a class timetable.
The signature is a one-rep-max calculator that sits live in the hero: set your max with a draggable slider, a pair of steppers or a real number field, and every week of the twelve-week block recomputes its prescribed load, an SVG progression curve redraws with its axis, and a plate diagram shows exactly what to put on each side of the bar. The barbell arithmetic is real - a 20 kg bar, plates from 25 down to 1.25, and a rounding step of 2.5 kg - so the panel shows the theoretical target and the nearest weight you can actually build side by side.
The art direction runs on a cold steel ground with chalk type and one hazard yellow, set in League Spartan, Asap and Share Tech Mono, with photography bundled as art-directed WebP derivatives baked to a cold steel duotone.
## Features
- Complete deployable one-page site: nav, split hero with the calculator live in frame, method, the twelve-week block table, four main lifts, coaches, membership tiers, a full-bleed room band, visit and hours, footer
- Signature programme calculator: one state object drives the hero panel and the twelve-week table together, so no two numbers on the page can disagree
- Three controls, one value: a Draggable slider, plus and minus steppers, and a real number input, so touch, mouse and keyboard all set the max properly
- Real barbell arithmetic: 20 kg bar, plates of 25 / 20 / 15 / 10 / 5 / 2.5 / 1.25, rounded to the nearest loadable weight, with the prescribed figure and the rounding error both shown
- Plate diagram drawn in SVG at the plates' real relative diameters and thicknesses, rebuilt every time the load changes and compressed automatically if a heavier programme overruns the sleeve
- SVG progression curve whose vertical axis and tick labels redraw with the max, plus a one-off dashoffset draw when you switch lift
- GSAP count-ups on every figure, driven by one interpolated max so the plates, the curve and the table all move together
- Each of the four lifts remembers its own one-rep max, and the block table's week numbers become buttons that drive the calculator
- The whole programme is one commented array at the top of the script - change the weeks, sets, reps or percentages without touching any logic
- Degrades completely: with JavaScript off the full block renders as a plain readable table at a documented 100 kg default, with the plate maths already written into the markup
- Reduced motion keeps the calculator fully interactive and drops only the movement, because it is a control and not decoration
- Bundled gym photography baked to a cold steel duotone, around 250KB total
- Three-colour token block: change steel, chalk and hazard and the whole site reskins
- Lenis smooth scrolling wired in and fully optional
## Use Cases
- Strength gyms, barbell clubs and powerlifting or weightlifting gyms
- Independent coaches selling a written programme rather than sessions
- CrossFit-adjacent boxes that want to sell the programming, not a class list
- Any membership business whose product is a plan a visitor should be able to try before joining
- Anywhere a site needs a live calculator that a visitor can actually put their own numbers into
## How It Works
### Structure
One script initialises each section inside a single gsap.context with gsap.matchMedia, keyed only on reduced motion so exactly one branch runs on every device, and every section is guarded so a buyer can delete any of them.
### The calculator
The calculator holds one state object - the chosen lift, a one-rep max per lift, and the current week - and a single render(max) function writes the hero readouts, the plate diagram, the curve and all twelve rows of the block table from that one number, which is what makes it impossible for two readouts to disagree. A count-up is therefore free: a GSAP tween interpolates the max on a proxy object and calls the same render on every frame, so the figures climb while the plates appear and the curve travels, all internally consistent at every intermediate value.
### Plates and the slider
Loads round to twice the smallest plate, because plates go on in pairs, and the plate breakdown is a greedy walk down the plate list, which is provably optimal for this denomination set. The slider is a Draggable with type 'x' and liveSnap mapping pixels back through the same value scale the steppers and the number field use, and allowNativeTouchScrolling leaves vertical page scrolling to the browser so a finger on the handle does not trap the page; the handle also carries role=slider and its own arrow, Page, Home and End key handling, because a Draggable is invisible to a keyboard. Meaningful changes are announced through a debounced polite live region.
### Without JavaScript
The markup already contains the complete twelve-week table worked out at the documented 100 kg default, along with a statically drawn plate stack and curve, so with JavaScript off nothing about the programme is missing; the script hides one explanatory note and takes over the same elements. Under reduced motion the calculator stays entirely interactive and only the count-up, the curve draw and the surrounding reveals are dropped.
## 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. Copy the folder onto your server.** These four things are the whole site:
```
index.html
assets/style.css
assets/script.js (or script.min.js)
assets/img/*.webp
```
**2. Open `index.html`.** Replace the copy, the coaches, the prices and the
address. Everything is plain HTML and nothing is generated at runtime except the
numbers in the calculator.
**3. Open `assets/script.js`** and edit the block marked `YOUR PROGRAMME` at the
very top. That is the only place the training model lives.
**4. Open `assets/style.css`** and change the three colours in `:root`. See
[Palette](#palette).
That is it. There is nothing to install.
---
### Accessibility
- The lift picker is a real radio group, so the browser owns arrow keys, grouping
and checked state.
- The max is a real ``. It is never rewritten while you are
typing in it, so the caret does not jump.
- The slider handle is a `