# Financial Planner 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.

Canonical: https://gsapvault.com/templates/financial-planner-template
Live demo: https://gsapvault.com/demos/financial-planner-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | advanced |
| Plugins | ScrollTrigger, Draggable |
| Techniques | draggable, svg-data-viz, count-up, value-transition, keyboard-navigation, scroll-reveal |
| Uses Lenis | Yes |

## Overview

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.

## Features

- 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

## Use Cases

- 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.

## 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. Keep the shipped structure:

```text
index.html
assets/
  style.css
  script.js
  script.min.js
```

2. Replace the fictional firm name, adviser biography, address, email and telephone number in `index.html`.
3. Point the consultation links at your booking form, CRM or email address.
4. Replace the regulatory placeholder in the footer with wording approved for your firm and jurisdiction.
5. For production, change the last local script tag to:

```html
<script src="assets/script.min.js"></script>
```

Deploy the folder to any static host.

### Accessibility

- Hero route waypoints support hover, tap, focus, Enter/Space and arrow-key navigation; the route detail is exposed as live text.
- Every age marker is a keyboard-operable `role="slider"` with visible focus and current `aria-valuemin`, `aria-valuemax`, `aria-valuenow` and `aria-valuetext`.
- Arrow keys move one year. PageUp/PageDown move five years. Home and End select the bounds.
- Touch handling reads coordinates from the raw event, commits nothing on press and changes the plan only after horizontal intent is proven. Vertical swipes that start on a rail continue scrolling.
- The live summary has a concise computed label. The SVG also has a title and description; update both if milestones change.
- The skip link, semantic headings, lists, links and sufficient contrast work without animation.

### Dependencies

Loaded as plain CDN scripts in `index.html`:

- GSAP core 3.14.2
- ScrollTrigger 3.14.2 — scroll reveals
- Draggable 3.14.2 — timeline rails
- Lenis 1.3.17 — optional smooth scrolling

Lenis is optional. Delete its CDN tag and native scrolling continues to work. GSAP, ScrollTrigger and Draggable are required for enhancement; if any is unavailable, the static fallback remains.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Financial Planner Template](https://gsapvault.com/templates/financial-planner-template)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt