# Outdoor Adventure

> An outdoor adventure website template with an expanding glass hero and landscape scroll, an interactive journey profile and full-bleed mountain photography. Repoint it to a travel agency, hotel retreat, outdoor brand, photographer portfolio or event website.

Canonical: https://gsapvault.com/templates/outdoor-adventure-template
Live demo: https://gsapvault.com/demos/outdoor-adventure-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | parallax, scrub, scroll-reveal, click-toggle, svg-animation |
| Uses Lenis | Yes |

## Lighthouse, as measured

Google Lighthouse on the demo, 9 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

A complete outdoor adventure website template built around the landscape. Higher Ground is the worked example: a small walking company in Bolzano inviting eight people into the Dolomites for six days. Large condensed type sits over mountain photography inside a lightly glazed hero. Its inset edges expand during a brief scroll pause, then give way to a limestone introduction and an expansive photographic journey.

Scrolling opens a narrow landscape window into a full-width view. Three chapters move from meadow to high ridge to still water. Further down, visitors handle an illustrated route themselves, moving a marker through the terrain and choosing the photographs and stories they want to explore.

A people-led company section and editable departure rows complete the page. Change the four photographs, the forest and limestone tokens, and the trip copy to make it a travel agency, hotel retreat, outdoor brand, photographer portfolio or event site.

## Features

- Complete one-page site with navigation, mountain hero, journey, company, departures and footer
- A lightly glazed hero that briefly pins and expands from inset to full width
- A landscape aperture that expands with scroll on desktop
- Three directly selectable landscape chapters with captions
- Interactive illustrated journey profile with a keyboard and touch range control
- Four bundled, graded WebP photographs with source credits
- Full photographic document for mobile, reduced motion and JavaScript-free browsing
- Native departure accordions and editable email enquiry links
- Semantic colour tokens, independent sections and an annotated customisation guide

## Use Cases

- Travel companies presenting one memorable group journey
- Hotels and retreats building desire through their surroundings
- Outdoor brands telling a landscape-led campaign story
- Photographers presenting a place through connected chapters
- Events with a location that deserves to fill the screen

## Questions about this template

### What else can I use this outdoor adventure design for?

The mountain trip is one example. The full-width photography and explorable chapters also suit a travel agency, hotel retreat, outdoor brand, photographer portfolio or event website. Replace the valley, ridge and lake with your own three places or project stages, and rename the journey profile to match the story you want visitors to explore.

### Can visitors book one of the displayed departures?

The June, July and September rows show example departures and open an email enquiry. They do not reserve places, check availability or take payment. The address is a placeholder, so replace it before going live. You can also point each enquiry link to the relevant trip in your existing booking service.

### Are the mountain photographs included?

Yes. The ridge, meadow, lake and resting walkers are bundled as optimised WebP photographs with a consistent grade. The included credits identify the Pexels sources. You can keep these landscape images or replace the four local files; the README explains the recommended crop and where each image appears.

### Is the interactive route a real trail map?

No. It is an illustrative elevation shape that introduces three chapters of the week. It does not contain surveyed elevations, distances or navigation data. If you are selling a real walking trip, publish your verified itinerary separately and keep the illustrated profile as the visual introduction.

### Can I use more than three landscapes?

The page is arranged around three substantial views: valley, high path and still water. You can add or remove landscape figures and their matching chapter controls, or replace the three with another sequence. The README identifies both chapter groups and explains how to keep their labels and photographs paired.

### Will portrait photographs work in this design?

The opening, landscape chapters and company section use wide crops, so landscape photographs are the easiest fit. Portrait originals need enough spare space around the subject to survive those crops. Keep people away from the text area in the company photograph, and check the narrow phone crop before replacing that image.

## Vibe-Code Ready Setup

This template 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

### The mountain opening

An almost edge-to-edge ridge photograph and oversized condensed headline establish the scale of the journey. A short scroll pause opens the inset hero to the edges and straightens its lower corners. The photograph and type then separate gently as the page continues. Reduced motion keeps the opening still.

### The changing landscape

A narrow view of the valley opens into an immersive landscape. The scene continues through a high ridge and still lake, with direct chapter controls for visitors who want to choose their view. Each photograph carries its own caption and retains a full-size presentation in the static page.

### Walk the week

Visitors can move through an illustrated rise and descent, changing the selected photograph and journey story as they go. The three chapter buttons provide another way into the same material. The profile is clearly described as an illustration, rather than a measured route or navigation guide.

### The human part

A large photograph of walkers and a compact company account bring the story back to the people. Native departure rows reveal editable trip information and an email enquiry link. These are example departures, with no availability system or payment service attached.

### A complete fallback

On phones and with reduced motion, the landscapes read as a sequence of full-size photographs. The journey control supports touch and keyboard input, while browsing without JavaScript leaves every chapter in the document. The core trip information remains available if an animation dependency cannot load.

## Documentation

How this template 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

1. Keep `index.html` beside the `assets` directory and open it through a local web server.
2. Replace the Higher Ground name, trip copy and example departures in `index.html`.
3. Replace every `hello@higherground.example` address with your real enquiry address. These are placeholder email links, not a booking service.
4. Upload `index.html` and `assets` to your static host. The page does not require a build step.

The HTML loads GSAP, ScrollTrigger, Lenis and Google Fonts from their CDNs. The readable `assets/script.js` is loaded by default; switch the final script tag to `script.min.js` if you prefer the minified file.

### Using It With Your Own Design

`assets/style.css` owns the complete visual identity. The JS uses `data-` attributes so you can restyle classes without changing the interactions. Keep each section's hooks together when moving it. Every initialiser checks for its section, so you can delete a complete section and the remaining ones still run.

The HTML is the full content model. With JavaScript disabled, the landscapes and route stories remain in reading order. The synchronous `has-js` head script is the enhancement signal and is removed if GSAP or ScrollTrigger cannot load. Do not add unguarded hidden states to your own text.

The desktop landscape window depends on the `.is-aperture` class, which the script adds only when pinning is supported. The default figures are normal document sections. Retain the positioned image wrapper and overflow clipping in the hero and company image: their photographs need the spare area for parallax.

### Sections and options

#### Mountain opening

`[data-hero]` contains a photograph layer, a heading layer and ordinary navigation. Change the headline directly in the `h1`. The display scale is designed for a short phrase; check the single-line desktop and phone layouts if your title is longer than “GO HIGHER.”.

The photograph uses `object-fit: cover`. Adjust `.hero__image`'s `object-position` to preserve your focal point. The scrim keeps white text readable: its upper edge protects navigation, its middle protects large display type, and its bottom protects the trip facts. Recheck contrast before reducing those values. Fine-pointer depth is intentionally mild; scroll supplies the larger movement.

#### Landscape aperture

`[data-aperture]` owns three `[data-landscape]` figures and the matching `[data-landscape-jump]` buttons, in the same order. Change each image, alt text, title and caption together. When adding a chapter, add both its figure and its button. The script derives the count from the figures.

The desktop pin has 1.35 viewport heights of travel. Change the `1.35` multiplier in the trigger's `end` function to adjust the pace. `clipPath` opens the viewport; `scale` belongs to the photographs inside it. On smaller screens, coarse pointers or reduced motion, pinning is skipped and the figures remain a vertical sequence. The chooser appears only when the pin is active.

Anchor links account for the pin spacer. Keep the real `href="#landscapes"` so navigation also works without JavaScript. Do not add CSS `scroll-behavior: smooth`; Lenis and CSS must not each animate the same scroll position.

#### Illustrated journey

`[data-route]` contains the native range, the SVG profile and the `[data-route-panel]` stories. Each panel carries a `data-route-name` used for the range's accessible value. Buttons with `[data-route-jump]` choose the same chapters as the range. Keep buttons and panels in matching order.

The range maps 0–100 to the length of the SVG path. If you edit the shape, change the `d` attribute on both `[data-route-path]` and `[data-route-progress]`; update the decorative filled area to fit. The diagram is illustrative, not real trail data. Publish a verified itinerary separately if your actual product needs one.

The default route contains all story panels. JS adds `.is-explorer` and hides only the inactive panels. Touch, keyboard arrows and chapter buttons update the same state. In reduced motion the marker changes position immediately.

#### Company and departures

The company image works best with people in the centre-right of a wide frame. The large heading sits at the lower left on a local scrim. The three native `<details>` rows below it can be edited, duplicated or removed without script changes.

**There is no booking backend.** Dates, group size and company details are fictional example content. Enquiry links open the visitor's email application with a subject line; they do not reserve a place, send a message automatically, take payment or check availability. Replace the placeholder email address or link to your own booking platform before launch.

### Palette

The semantic tokens are at the top of `assets/style.css`:

| Token | Use |
| --- | --- |
| `--ground` | Limestone paper and light control surfaces |
| `--ink` | Forest text and dark sections |
| `--surface` | Glacier landscape ground |
| `--accent` | Fired-red active route marker and states |
| `--inverse` | White text over dark surfaces |

Each colour has a matching RGB triple for translucent treatments. Change both when reskinning. The root comment records measured solid and composited text contrast. Photographs provide most colour; the accent is limited to interaction states. This template has no palette picker.

Display type is Oswald 600; body type is DM Sans. Change `--font-display`, `--font-display-weight` and the Google Fonts link together when selecting another face. Check the hero and footer wordmarks at 375px after a font swap.

### Images

The download includes four optimised, graded WebP derivatives in `assets/img/`. They are shared across sections to keep the transfer size small. `assets/img-manifest.json` records source URLs, crop dimensions, grade and quality settings.

| File | Crop | Appears in |
| --- | --- | --- |
| `ridge.webp` | 1920 × 1200 | Hero, high-path landscape and route story |
| `valley.webp` | 1600 × 1100 | Valley landscape and route story |
| `lake.webp` | 1600 × 1100 | Still-water landscape and route story |
| `hikers.webp` | 1920 × 1200 | Introduction and company photograph |

To swap photographs, replace these local files and keep the names, or edit the manifest's `src` entries. Update every occurrence's alt text and caption to describe the new photograph. The lake is a landscape illustration; do not imply the set documents one exact itinerary.

In the GSAP Vault source repository, regenerate the derivatives with:

_Code snippet omitted: it ships with the download._

That authoring command uses the repository's asset script and Sharp dependency; the deployed template does not need either. A buyer outside that repository can export their own WebP crops directly to `assets/img/`.

#### Photo credits

All source photographs are provided under the [Pexels licence](https://www.pexels.com/license/). The bundled files are resized and graded derivatives.

- [Ridge photograph](https://www.pexels.com/photo/landscape-photography-of-mountains-461944/)
- [Valley photograph](https://www.pexels.com/photo/majestic-dolomites-landscape-in-trentino-alto-adige-30234040/)
- [Lake photograph](https://www.pexels.com/photo/stunning-dolomites-landscape-with-reflective-lake-34302403/)
- [Hikers photograph](https://www.pexels.com/photo/hikers-relaxing-in-scenic-mountainous-meadow-28575389/)

### Accessibility and fallbacks

- Native links, range controls and departure disclosures support keyboard access, with visible focus rings.
- Landscape chapter buttons exist only in the enhanced desktop experience; other modes show every photograph.
- Reduced motion disables parallax and the pin, and makes route marker updates immediate.
- No-JS and blocked animation CDNs leave the complete document visible. The range is disabled and hidden until its handler is ready.
- Images have local files, explicit dimensions and descriptive alternatives. Above-the-fold photography is prioritised; later images load lazily.
- No touch gesture is captured for the hero. The native range supports touch without an unrelated page-wide gesture handler.

### Smooth scrolling and cleanup

Set `data-smooth="off"` on `<html>` or use `?smooth=off` to disable Lenis. Reduced motion also disables it. GSAP and Lenis share one ticker, and the refresh listener adopts the position restored by ScrollTrigger.

When unmounting this page in a client-side router, call `window.gsapContext.revert()` and then `window.destroyLenis()`. Context teardown reverts section animations and pins, removes stored event handlers, restores the static chapter documents and kills the route marker tween. Lenis teardown removes its ticker and refresh listener before destroying the instance.

### Dependencies

- GSAP 3.12+ and ScrollTrigger; this page pins the current repository CDN release.
- Lenis, optional smooth scrolling.
- Google Fonts: Oswald and DM Sans.
- No framework, form provider, booking system or build runtime is needed for the static page.

### Mobile navigation

Below 900px the header uses a native details menu. It works without JavaScript. With scripts available, choosing a link, clicking outside, pressing Escape or widening the viewport closes it. Escape returns focus to the toggle; choosing a section moves focus to that destination. Keep the desktop and mobile link lists in sync when renaming sections.

### Expanding glass hero

The hero starts almost edge-to-edge with a 10–24px inset, rounded bottom corners and a light glass sheen over the photograph. A short pin (32% of a viewport on desktop, 22% on smaller or touch screens) expands it to the edges and straightens the lower corners before photograph/title parallax begins. The full-width `.hero-shell` owns the pin; the child owns the expanding margins. Reduced motion skips the pin and leaves the inset composition still. No query parameter is required.

## 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 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 Outdoor Adventure](https://gsapvault.com/templates/outdoor-adventure-template)
- [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](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