Instructions
Everything you need to make Hedgerow your own, from brand colors to CMS content and animations.
Colors, type and spacing
Open the Variables panel. The Colors collection holds the palette and the semantic tokens (Background, Text, Border) used by every class. Change a palette color and the whole site follows. Typography and Spacings have Tablet and Mobile modes, so sizes scale down on smaller screens automatically.
Components
Edit links once in the Navbar component. The button text and link are instance properties.
Four variants: Primary, Outline, Light and On Dark. Set the text, link and variant on each instance.
Holds the newsletter form, links, contact details and the large wordmark.
CMS collections
Each program has a name, image, summary, description and number of active grants.
The newest story is featured on the home page; the next three appear in the side list. Link each story to a program with the Category field.
Events are sorted by start date. Keep the Day and Month fields in step with the start date, and paste your booking page into Registration link.
Animations
All animations are built with native Webflow Interactions using Webflow's GSAP integration. Open the Interactions panel to adjust timing or easing. The only custom code is Lenis smooth scroll, explained below.
Wrap any element in a div with this class and it rises in on page load, staggered with its siblings.
Wrap any element in a div with this class and it fades up as it scrolls into view.
The Journey horizontal scroll and the Events cursor image run on desktop only. The Partners marquee repeats two identical sets of names, so edit both.
Custom code
Hedgerow uses one small piece of custom code: Lenis smooth scroll on the Home page. It makes scrolling feel softer and keeps the scroll-based Interactions in sync. It uses Webflow's own GSAP, so no extra animation libraries are loaded, and it switches itself off for visitors who prefer reduced motion.
Home page settings → Custom code → Before </body> tag.
Loads Lenis from unpkg and connects it to GSAP ScrollTrigger so pinned and scrubbed animations follow the smooth scroll.
Delete everything in that Before </body> block and publish. All animations keep working with normal browser scrolling.
Forms and donations
The contact, gift and newsletter forms are native Webflow forms. Set up form notifications in Site settings and test them on your published site. Donate buttons link to the Contact page by default; point them at your donation provider before launch.