# Pricing Comparison

> A complete SaaS pricing section with three comparable plans, monthly and yearly billing, clear annual totals and a focused plan-selection handoff.

Canonical: https://gsapvault.com/sections/pricing-comparison-section
Live demo: https://gsapvault.com/demos/pricing-comparison-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | state-transition, progressive-enhancement, interruptible-transitions, keyboard-navigation, container-queries, responsive-section |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

Give visitors the information they need to choose a plan. This complete pricing section pairs three comparable offers with a compact billing switch, explicit recurring charges and a clear next action. A joined ledger keeps the plans visually connected, while a pale blue middle column gives the featured offer a useful emphasis.

The fictional Draftroom example covers client review software for independent practitioners, studios and agencies. Every plan shows who it suits, the included team and project limits, and the amount due. Yearly billing shows both the monthly equivalent and the full annual charge. On phones, complete plans stack in a readable sequence.

## Features

- Three complete plans with audience, price, included limits and a selection action
- Monthly and yearly comparison with explicit annual charges
- One joined comparison ledger with a featured middle plan
- Coordinated billing transitions that keep each price and charge together
- Honest sample handoff dialog for the selected plan and billing term
- Complete monthly and yearly information without JavaScript
- Keyboard and touch operation with instant reduced-motion changes
- Editable semantic content, scoped brand controls and independent instances

## Use Cases

- SaaS landing pages comparing workspace subscriptions
- Membership websites showing monthly and annual options
- Studios presenting ongoing website care packages
- Coworking spaces comparing membership tiers

## Vibe-Code Ready Setup

This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Visitors can compare all offers side by side and choose monthly or yearly billing. The selected billing term updates every plan together, with annual charges kept beside the monthly equivalent. Selecting a plan opens a concise sample handoff identifying the offer and term.

On narrow screens the plans become a complete vertical comparison. Without scripts, both billing options remain readable and each plan offers a native disclosure explaining the sample action. Motion preferences are respected, and the section can be placed alongside other content without taking over scrolling.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

Keep `index.html` beside `assets/`, or copy the complete `<section class="pc-section" data-pricing-comparison>…</section>` boundary into your page. Include the stylesheet, GSAP core and the section script once:

_Code snippet omitted: it ships with the download._

No build step or animation plugin is required. The inline body-margin rule in the example head is preview-only; omit it in your host.

### Using It With Your Own Design

Edit the title and intro, then each `[data-pc-plan]` article in `index.html`. The plan name is `[data-pc-name]`; descriptions, included limits and feature bullets are ordinary HTML. The two `[data-pc-price]` blocks contain the complete monthly and yearly offers. Keep the monthly equivalent and actual annual charge consistent; the section deliberately does not calculate or invent prices.

For example, change Draftroom to a website care service, rename Solo / Studio / Agency to Maintain / Improve / Partner, and replace the included project limits with support scope. Update both pricing blocks and the sample notes. Currency and tax wording are ordinary text, so you can specify your market accurately.

Brand controls are together on `.pc-section` in `assets/style.css`: `--pc-ground`, `--pc-ink`, `--pc-muted`, `--pc-accent`, `--pc-accent-hover`, `--pc-on-accent`, `--pc-highlight`, `--pc-rule`, font roles, `--pc-width`, `--pc-gutter`, `--pc-space` and `--pc-radius`. The font stack uses installed system faces and requires no remote font. Recheck contrast after colour changes. There are no content images to replace.

Add, remove or reorder whole `[data-pc-plan]` articles. Keep both price blocks and one choice disclosure in each. A single plan works; the script imposes no maximum. For many plans, consider splitting the comparison for readability. Grid columns follow available space and plans stack below the named 850px container breakpoint. Heading tags can change without changing selectors.

The `.pc-price-group` wrapper is important: the amount and billing charge change together. Keep the indicator inside `.pc-switch` so its measured position stays correct. No global CSS reset is required.

### Behaviour and Options

| Hook | Purpose |
| --- | --- |
| `[data-pricing-comparison]` | Independently mounted section root |
| `data-motion-duration="0.32"` | Transition duration in seconds; reduced motion is always instant |
| `[data-pc-term="monthly/yearly"]` | Native billing selection buttons |
| `[data-pc-price="monthly/yearly"]` | Complete price and charge for that term |
| `[data-pc-choice]` | Native fallback disclosure, enhanced to a plan dialog |

Mount dynamically inserted content and revert only this instance:

_Code snippet omitted: it ships with the download._

Initial markup mounts automatically. Calling `mount` on an already-mounted root first reverts that instance. Two roots operate independently. Remove a root only after calling its `revert()` method.

#### Connect your own signup

The sample buttons open a native dialog with the selected plan and charge. No account is created. For a real website, replace the entire choice disclosure with a normal link to the relevant signup route, or integrate your own flow using the event:

_Code snippet omitted: it ships with the download._

To use a fully custom handler, remove the sample dialog and change the choice markup to actual links or buttons handled by your application. The billing comparison works without the dialog. Avoid leaving the sample handoff on a production checkout path.

### Accessibility and Integration

Native billing buttons support keyboard and touch with visible focus and `aria-pressed` state. A polite status announces billing changes. The native dialog supports Escape, modal focus and return to the selected plan. Without JavaScript or GSAP, both prices are visible and the action is a native disclosure; no content is hidden behind inert controls.

Reduced-motion preferences apply immediately, including changes while mounted. Repeated choices settle on the latest request. There is no page entrance gate, scroll takeover, Lenis, fixed section height or pinning. The default main heading is `h2`, with `h3` plan names; choose levels appropriate to your page. The section reflows in narrow host columns using a named container query. Long phone comparisons intentionally scroll in the host document.

### Dependencies and Credits

- GSAP core, tested with 3.15.0; GSAP 3.12+ supports the required APIs. See the [GSAP licence](https://gsap.com/standard-license/).
- Native `dialog`, `ResizeObserver` and CSS container queries in current browsers. Browsers without native dialog retain the plan disclosures.
- System fonts, no external photography or graphic assets.
- Draftroom, its packages and all prices are illustrative, not a real software offer. Replace sample commercial terms before publishing your own offer.

## 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
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](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