Instructions
How to change what moves, where the content lives and what carries the look. Everything below is edited in the Designer, without code.
Element map
Every animation in this template is a native Webflow Interaction, and Interactions run on GSAP. Open the Interactions panel in the Designer: the 45 below are listed there by these names. An element takes part by carrying the class named in its trigger.
Their .line_trace goes scaleX 0 → 1 from the left, 300 ms.
A .button with a station (primary, secondary, pagination, the form’s submit).
Its .route_dot fills the ring (scale 0 → 1) and the station steps 8px on towards where the button leads (Previous steps back), 300 ms.
A form control (.form_field-line) or a date tile (.form_tile).
The 2px .line_trace.is-field along its bottom edge draws from the left, 300 ms.
A card_component that is a link.
The trip’s lit line sweeps in from the start to its filled finish station (the folded .route_reveal and its line move against each other, xPercent -100 → 0 and 100 → 0, 600 ms).
The N-th night of the map (.map_link).
The station of that night on the map (.route_stop.is-map-N) grows 1 → 1.8, 300 ms.
A trip row (card_component.is-row) or a departure_row.
The row’s .line_trace.is-row draws along its top hairline (400 ms), the link’s line (300 ms).
faq_question (the Dropdown toggle).
The answer rises 8px from 0 opacity (400 ms) and the ring beside the question fills (scale 0 → 1, 400 ms) each time its question is clicked.
navbar_menu-button.
section-header_rule goes scaleX 0 → 1 from the left, 600 ms.
route_figure: its .route_reveal mask and the .route_line inside it move against each other (xPercent -100 → 0 and 100 → 0, 800 ms, even speed).
passport_track: the start station lights (opacity 0 → 1, scale 0.6 → 1, 300 ms), the line draws from it (scaleX 0 → 1 from the left, 600 ms.
A route row (card_component.is-row.is-route).
Its lit line, folded at the start (.route_reveal.is-folded and its .route_line, xPercent -100 and 100), sweeps to the filled finish station: mask and line against each other, 600 ms.
Scroll, while section_days is on screen
A day_component #day-0N is being read from the moment its top reaches 60% of the window until the next day’s top does (the last day: until its foot has gone up under the rail).
Tied to the scroll through the day: the ring on the day’s rail label fills in the first 5% of the day and empties in the last 5%, and the station of that night fills in the last 5%.
The map’s route figure (.map_figure .route_figure.is-scrub), from the moment the start’s station (San Vidal.
The mask laid over the contours (.route_reveal.is-overlay) goes xPercent -100 → 0 and the route inside it 100 → 0 at an even speed. The station positions are fixed from the 1440 px layout.
Each night’s station and the finish’s (.route_stop.is-map-1…4 .route_station) drops 1.5rem onto the map (y -24 → 0, opacity 0 → 1.
section_days, from its top at the top of the window to its foot at the foot of the window (the rail is stuck all that time).
The rail’s lit line (.route_reveal.is-folded and its .route_line) goes xPercent -100 → 0 and 100 → 0, even.
Scroll into view: the plot’s foot (.grade_plot) 8px before the foot of the window, so as the chart arrives whole on screen; plays once per arrival (reset when the chart has left below the window)
The four rises (.grade_rise) go scaleY 0 → 1 from the baseline, 500 ms each, 100 ms apart (800 ms in all).
The seven .about_bar of the notes sheet go scaleX 0 → 1 from the left, the same ease for all, 500 ms each, 80 ms apart (1,060 ms in all).
The station that opens a step lights (opacity 0 → 1, scale 0.6 → 1, 300 ms) and the rule leaves it (.about_step-rule scaleX 0 → 1 from the left, 600 ms).
The worked example of the grade chart (.byg_chart): each climb’s rule (.byg_bar-rise) goes scaleX 0 → 1 from the baseline, 800 ms, 120 ms apart, power2.out.
The two stops of booking (.byg_step-list): the line of the first stop (.passport_line, scaleX 0 → 1 from the left, 600 ms) runs to the second stop’s ring, which lights (opacity 0 → 1.
A gallery figure (.gallery_item, .gallery_feature).
Its photograph (.image-cover) scales 1 → 1.03 (800 ms), the station before its caption fills (.route_dot scale 0 → 1.
A route of the opening (.gallery_route, a link to its trip).
The line under its name (.line_trace) draws from the left, scaleX 0 → 1, 300 ms.
The steps’ route (.enquire_step-list): every ring fades in (opacity 0 → 1, scale 0.6 → 1, 0.4 s apart) and each line below a ring draws down to the next (.enquire_step-line scaleY 0 → 1 from the top, 400 ms).
A route row (card_component.is-row.is-season).
The stations on its season line (.home-b-season_slot .route_station) grow 1 → 1.45 one after another in date order (300 ms each, 40 ms apart): the dates the route leaves, read left to right.
The season band of the first screen (.home-b-band_season): its line draws from 26 June (scaleX 0 → 1 from the left, 800 ms.
Each row’s .home-b-season_line draws from 26 June (scaleX 0 → 1 from the left, 600 ms, even speed), rows 120 ms apart.
The scale’s line runs down from grade 1 to grade 5: each rung’s .home-b-scale_line grows from its top (scaleY 0 → 1, 200 ms, even speed, one after the other.
Station 01 lights (opacity 0 → 1, scale 0.6 → 1, 300 ms), the stretch of line to the next station draws (.home-b-steps_seg: scaleX and scaleY 0 → 1 together, 250 ms, at every width).
A door of the first screen (.home-c-door).
Its frame’s .image-cover draws closer (scale 1 → 1.03, 800 ms), the line under the region’s name draws (.home-c-door_name .line_trace, scaleX 0 → 1, 300 ms).
Each region’s lit season (.home-c-season_line) draws from its first departure (scaleX 0 → 1 from the left.
.article_read, from its top at 60% of the window to its foot at 60% of the window (the text is read whole before the page ends).
The Glacier line (.article_rail-fill) goes scaleY 0 → 1 from the first ring down, even speed.
A region in the key beside the heading (.regions_open-key .map_link), the N-th of three.
The station of that region on the map (.route_stop.is-regions-<id> .route_station) grows 1 → 1.8 and the two other areas (.regions_area) step back to 0.35, 300 ms.
Its photograph scales 1 → 1.03 (800 ms), the line along the row’s top hairline draws (.line_trace.is-row, 400 ms).
The three shaded areas (.route_figure.is-atlas .regions_area) come up 0 → 1 opacity one after another (600 ms, 200 ms apart), after the legs of the map have drawn.
The rail of a region’s page (.region_stop-list): the line through its stations goes scaleY 0 → 1 from the top (800 ms), and each station (.region_stop .route_station) lights (opacity 0 → 1.
The route’s lit line on the shared scale, folded at its start (.route_reveal.is-folded and its .route_line, xPercent -100 and 100).
A day row (.trip-day_row): its strip draws (“Route line draws”, 800 ms), and as the strip’s front reaches the day’s end the station of the night beside it (.trip-day_night .route_station.
The card’s route line on the shared ruler (.card_body.is-measure .card_route): mask and line against each other, 800 ms, even.
A region tab (.filter_link).
.utility_gate, the upright bar across the 401’s line: it closes (scaleY 0 → 1 from its middle, 300 ms) at the moment the front of the line reaches its x.
Interactions animate only transform and opacity, for 0.3 to 0.8 seconds; the instant sets (the menu label, the Current line of a tab, the chosen date tile) say so in their rows. Every element is styled into its final place by its class, and the Interaction only changes how it arrives, so nothing waits hidden for an animation. A visitor who asks the system for reduced motion sees every element in that final state, except the progress line of the contents rail on Before you go, which stays at zero. Each hover Interaction plays its timeline on Hover in and reverses it on Hover out, as the Interactions panel names the two events.
Customising key variables
Duration
Hovers last 0.3 seconds, a line that draws itself 0.6 to 0.8. A longer duration reads calmer; past 1 second a hover feels late. Set it in the action, for example Duration 0.3s.
Easing
State changes ease out, fast at the start and settling at the end: expo.out, close to the template's own curve cubic-bezier(0.16, 1, 0.3, 1). A line that draws across a drawing runs at an even speed, none, so its curve is never stretched. Keep one easing for one kind of motion.
Where a scroll animation starts
A scroll trigger names the point of the element and the point of the screen that meet: top 85% starts when the top of the element reaches 85 per cent down the screen. Lower the number to start later. Interactions marked once run to their end and stay there.
Scrub
A scrubbed Interaction is tied to the scroll bar and runs back when the visitor scrolls up: Map route draws with scroll, Days rail fills with scroll, Reading line fills. Switch scrub off and the action plays once at its own speed.
Removing GSAP animations
From one element
Remove the class that the trigger names, or remove the element from the Interaction's targets. For a button with a station, deleting its .route_dot child removes the fill and the step and keeps the button.
One Interaction, everywhere
Delete it in the Interactions panel. The elements it moved stay where their classes place them.
All of them
Delete every Interaction in the panel except Nav menu opens, which opens the menu below 992px. The questions keep opening, since they are Webflow's own Dropdown. What changes: the underlines that draw on a link's hover stay hidden, the lines of the drawings stand whole from the first view, and nothing arrives by scroll.
Pages and collections
Words that belong to one page are edited on that page in the Designer. Words that repeat, a route's numbers, a region's card, an article, are fields of a collection, edited in the CMS and shown wherever a Collection List binds them. The navbar and the footer are components: edit one, every page follows.
A collection page and its Collection Lists read the same fields, so a new walk is one new item in Trips, with its days in Days and its dates in Departures: fill the fields, publish, and its own page exists, with its days and its departures. The route cards on Home, Home C and Trips, the region rows on Regions and the departure tables on Home B are static elements: to show a new walk there, duplicate a card or a row and edit it.
Collections
6 in allPages
16 pages and 3 collection pagesindex.html
home-b.html
home-c.html
trips.html
regions.html
about.html
before-you-go.html
journal.html
gallery.html
enquire.html
404.html
401.html
trip/<slug>
region/<slug>
article/<slug>
template/style-guide.html
template/licenses.html
template/changelog.html
template/instructions.html
Fonts, colours and drawings
Two families
Source Serif 4 and Jost are uploaded as variable font files (Latin subsets), in the site's Fonts settings under Custom fonts. To change a face, change the variable Font Heading or Font Body in the Typography collection and every heading or text style follows.
Raw colours, then schemes
The raw colours are the variables of the first collection in the Variables panel: Spruce, Spruce Raised, Spruce Hairline, Ridge, Lichen, Lichen Deep, Snow, Fog, Fog Deep, Fog Hairline, Scree, Slate, Glacier, Glacier Deep. Pages use them only through the collection of colour schemes: its second mode is the light pause, and a section takes it by carrying the scheme's class, listed under Colour schemes in the Style Guide. The route line, its stations and the focus ring are the only places the glacier colours appear.
Sizes step by mode
Every heading size is a variable (Size Display to Size H6) with its own value in each mode of the Typography collection: Tablet, Mobile Landscape and Mobile Portrait. Page padding and section spacing step the same way in the Layout collection. The root stays at 16px, so the site scales by breakpoint, never by the width of the window.
SVG files, never code
Every drawing is an SVG file in the Assets panel, placed with an Image element. Replace the asset to change it on every page at once, or choose another file in the image's settings. The lines are drawn in the Glacier colours, #9FCFC6 on the dark ground and #2F6A61 on the light one: open the file in a text editor, replace the value and upload it again. A drawing has no letters in it; its numbers and names are live text laid over it in per cent of its box, so a station stays on its line at every width.