Financial Planner Template Template
A complete one-page site for an independent financial planner, centred on a draggable life-plan timeline that redraws an illustrative projection and updates the planning conversation live.
About This Template
A production-ready one-page site for a human financial planning practice. Northward Planning is a fictional independent Chartered Financial Planner in York, presented with a deep-ocean ground, warm ledger surfaces, a fresh chartreuse signal colour, plain-English copy and authored diagrams rather than photography, market tickers or dashboard theatre.
The signature life-plan timeline turns four familiar milestones - a home move, sabbatical, education support and retirement - into an accessible planning conversation. Each age marker can be dragged or moved from the keyboard; an SVG timing band and route redraw through the computed points while the next milestone, plan span, near-term priority count and recommendation settle into their new values. The language stays honest throughout: this is an illustration for discussing timing and trade-offs, not personal financial advice or a forecast.
The rest of the page is structured for a real advisory practice: an editorial promise hero, rule-separated planning areas, three stepped client scenarios, adviser biography and credentials, a practical consultation CTA and regulatory placeholder guidance in the footer. Replace the firm, adviser, services and contact details, review the disclaimer language for your jurisdiction, and deploy the folder as static files with no build step.
What's Included
- Complete deployable one-page practice site with compact nav, interactive route hero, life-plan timeline, planning areas, scenarios, adviser biography, consultation CTA and footer
- Interactive hero waypoints redraw the route and update a contextual planning note through hover, tap or keyboard navigation
- Four independently configurable milestone rails for home, sabbatical, education support and retirement ages
- Touch-safe Draggable handling that reads raw coordinates, commits nothing on touch press and only claims proven-horizontal gestures
- Full keyboard slider controls with arrows, PageUp/Down, Home and End plus live aria-valuenow, min, max and valuetext
- Authored SVG projection band and route that redraw from the selected ages with coordinated point movement
- Layered value transitions for the next milestone, total plan span, near-term priorities and recommendation copy
- Complete static default ages, projection, summary and disclaimer when JavaScript is unavailable
- Reduced-motion mode keeps every control active while all updates happen instantly and Lenis stays disabled
- Vollkorn and Alegreya Sans typography with tabular age figures and a 5.7rem hero display cap
- Measured ocean, eucalyptus and chartreuse palette with RGB triples for every translucent value
- Guarded section initialisation, gsap.context cleanup and optional Lenis synchronised with ScrollTrigger
- No photography or third-party image assets required
Perfect For
- Independent financial planners presenting a calm, personal alternative to corporate wealth sites
- Chartered advisers explaining holistic planning before individual products
- Retirement and later-life planning practices that need an accessible timing conversation
- Professional service firms adapting a draggable life-event timeline to long-term client decisions
- Learning touch-safe Draggable, accessible sliders and SVG data-visualisation updates in one real page
How It Works
Section structure
One script initialises the page inside a single gsap.context, while gsap.matchMedia provides complete motion and reduced-motion branches. Behaviour is attached through data attributes and every selector is guarded, so the hero, services, scenarios, adviser or consultation section can be removed without breaking the rest. A synchronous has-js gate prevents reveal flashes, and the class is removed if GSAP, ScrollTrigger or Draggable is unavailable.
The life-plan timeline
Each milestone stores its own minimum, maximum and current age in accessible slider attributes. Moving a marker maps its horizontal position back to a whole age, updates the visible output and ARIA values, then recomputes the next milestone, full plan span and number of priorities inside the next fifteen years. The summary recommendation changes with the timing pattern and is explicitly framed as a conversation prompt rather than advice.
The projection route
The selected ages are mapped onto a shared 25-to-75 SVG scale. The script builds a new line path and a restrained timing band around the four computed points, then animates their path data and point positions together; the summary figures transition through small GSAP proxies and the recommendation settles in as a second layer. Reduced motion uses the same calculations but paints every result instantly.
Accessible dragging
Every marker is a horizontal role=slider with complete aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext updates. Arrow keys change one year, PageUp and PageDown change five, and Home and End reach each rail's limits. Draggable reads raw event coordinates null-safely, changes nothing on touch press and waits for horizontal intent, allowing a vertical swipe that begins on the control to keep scrolling the page.
Without JavaScript
The HTML includes the complete default age plan, labelled SVG route, three summary figures, recommendation and disclaimer. Without scripting the handles remain visibly parked at their authored percentages, all content and links are available, and no reveal styles apply. If a required CDN is blocked, the script removes has-js so the same plain document is restored.