# Travel & Tour Template > A complete one-page site for a boutique small-group tour operator, built on a lagoon-teal ground with a coral accent, and an interactive itinerary map whose route line draws itself in as its signature. Canonical: https://gsapvault.com/templates/travel-tour-template Live demo: https://gsapvault.com/demos/travel-tour-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £10 | | Difficulty | advanced | | Plugins | ScrollTrigger | | Techniques | svg-draw, stroke-dashoffset, scroll-reveal, click-toggle, stagger | | Uses Lenis | Yes | ## Overview A production-ready site for a small-group walking-holiday operator, built for the one thing a tour company has to sell before anything else: the shape of the journey. It runs on a saturated lagoon teal with cream type and a single coral accent, and carries warm, sunny, people-first photography, bundled as optimised WebP with the brand's grade baked into the pixels, so it looks finished the moment it opens. The centrepiece is an interactive itinerary map. A stylised coastline is drawn in SVG rather than pulled from a map tile, seven numbered day-pins sit along it, and a coral route line draws itself in with the stroke-dashoffset technique as the section scrolls into view. Choosing a day, either on the map or in the rail beside it, lights that pin and swaps in the day's card: where you walk, what you do, and where you sleep that night. The rest of the page is disciplined around it: a hero framing walkers on the coast path, poster-tile cards carrying the wider collection on real trip photography, a plain what's-included and dates-and-prices block, one traveller's quote over a dinner shot, and an enquiry form. Every photograph sits under a teal scrim tuned so the cream text over it clears 4.5:1, and the copy, written for a fictional Portuguese coast operator in a warm, grounded voice, stays live text so the page is complete with images off. Every colour and price is yours to change in one token block. ## Features - Complete deployable one-page site: nav, hero, featured trips, the itinerary map, what's included, dates and prices, a testimonial, an enquiry form and footer - Signature interactive itinerary map: a stylised SVG coast, not a map tile, with a coral route line that draws itself in via stroke-dashoffset and no DrawSVG plugin - Seven numbered day-pins are real buttons, wired to the same day cards as the list beside them, so a day is one click or one tab-stop away on any device - Arrow keys, Home and End move between days with a roving tabindex, and every pin carries a full screen-reader label naming its day and village - Poster-tile trip cards carrying real, warm, sunny trip photography under a teal scrim tuned against the baked pixels, so the cream label and price clear 4.5:1 over any part of the image - Dates and prices as sand cards with per-departure availability, including a fully-booked waitlist state - A framed hero photo of walkers on the coast path beside a masked-line headline reveal, with the headline kept on the solid teal ground so its cream never drops below the contrast floor - Three-plus-one colour system: change teal, cream, coral and the sand surface and the whole site reskins, with every translucent value resolving from an RGB triple - Lenis smooth scrolling wired in and fully optional - Accessible by construction: the itinerary reads as a plain ordered list with JavaScript off, the map degrades to a decorative aside, reduced motion shows the route already drawn with day one open, and contrast is measured as used - Testimonials in a horizontal slider: several walker quotes on a native scroll-snap track with arrow buttons, keyboard and touch, readable as a plain list with JavaScript off - Photographs on three of the seven itinerary days (arrival, a clifftop stage, the final beach), so the day-by-day reads as a list broken up by the occasional view rather than a wall of images ## Use Cases - Small-group tour, trek and walking-holiday operators - Cycling, sailing, river and expedition trips sold as a fixed multi-day route - Retreats, pilgrimages and food or wine tours with a day-by-day itinerary - Any single hero trip that needs its route and stops shown before the booking ask - Travel agents and DMCs presenting one signature journey per landing page ## 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. Every section is looked up behind a guard and skipped if absent, so a buyer can delete the hero, the trip grid or the whole map and the rest still runs. Event listeners are held in a Map and torn down, with the route and cards cleared, whenever the media query flips. ### The itinerary map The coast is a hand-drawn SVG shape, and the day-pins are HTML buttons positioned over it in percentages that match the route's own coordinates, so pins and line stay in register at every width. Each day groups its pin, its rail button and its card by day number rather than by list index, so the pairing survives a deleted day. Selecting a day lights its pin, marks its rail button, and fades its card in; pins and buttons share one activate() path, so pointer, touch and keyboard all land in the same place. ### Drawing the route The route line uses the stroke-dasharray and stroke-dashoffset technique, so no DrawSVG plugin is needed. Its measured length is set as the dash array and as the starting offset, then a ScrollTrigger tweens the offset to zero once the section is in view, and the pins pop in behind it. The length is read defensively and the whole draw is skipped if it comes back zero, so swapping the path for a simpler line can never leave an empty corridor. ### Reduced motion and without JavaScript With reduced motion the route is painted in full, day one is the open card, and nothing scrubs or scrubs on scroll. With JavaScript disabled the seven days render as a plain ordered list, each with its title, activities and where you sleep, and the map becomes a decorative aside; the interactive card and pins only ever appear once a JS-added class upgrades the page, so no content is ever hidden behind a control that cannot work. ## 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. **Upload the folder.** `index.html`, `assets/style.css`, and `assets/script.js` (or `assets/script.min.js`) are all you need. It is static: no bundler, no framework. 2. **Keep the three script tags** just before `` and leave them as plain tags (no `integrity` attribute, so a version bump never breaks your deployed copy): ```html ``` 3. **Make it yours.** Change the palette in the `:root` block of `style.css` (see [Palette](#palette)), rewrite the copy in `index.html`, and edit the itinerary (see [The itinerary map](#the-itinerary-map-signature)). Point the enquiry form at your own inbox or booking system. ### Accessibility - **Keyboard**: day-pins and rail buttons are real `