Start Here
Welcome to Waveyu — a landing page template for camps, retreats, and adventure experiences. This guide covers everything you need to get started.
Getting started
Review this Instructions page
This page covers the parts that need special attention and are easy to accidentally break. Most of the template is straightforward to edit, but a few areas have specific logic worth knowing about before you begin.
Explore the Style Guide page
Head to the Style Guide to get a full overview of all visual elements — colors, typography, buttons, utilities, and spacing. Browsing it first helps you understand how the system is built.
Update tokens in the Variables panel
Open the Variables panel — it contains your core tokens like colors, border radius, and spacing.
Colors and border radius are worth updating first — by the time you move on to the Style Guide, you'll already be working in your own color palette.
Spacing is easier to adjust later, once you're working with real content and can see how everything sits on the page.
Edit typography on the Style Guide
With your colors in place, return to the Style Guide page to edit text, button, link, and utility styles. Everything is set up globally — edit once and the updates apply across the entire landing page.
Replace content on the landing page
Once the visual system is set, go to the landing page and swap in your texts, images, and links. Before editing specific sections, check the Tricky parts section below — a few areas need special handling.
Need help?
If something isn't working as expected or you have any questions, feel free to reach out — I'm happy to help!
What's safe to change
Most of the template is straightforward to edit. The areas to be careful about are sections where interactions are tied to specific class names or element structures.
Change freely
All text and images
Links and button destinations
Components
Via the Properties panel or directly inside
Colors and spacing
Via the Variables panel
Typography styles
Via the Style Guide page
Most GSAP animations
See Animations for details
Change with care
Navbar Scroll Invert Animation
See Components → Navbar Explained for details
Images in Program section
See Tricky parts → Program preview images for details
Room accordion in Stay section
See Tricky parts → Room Accordion for details
Levels cards in Levels section
See Tricky parts → Levels cards for details
Popups
See Tricky parts → Fullscreen & Slide Popups for details
Animations
The template has two types of animation — functional and decorative. Understanding the difference will help you edit, simplify, or remove animations without breaking anything.
CSS Transitions & Classic Interactions
These interactions are always interactive — they respond to user actions like hover or click. They can be decorative or functional, but they depend on user input.
Removing or changing these interactions may affect how key components behave, so edit them with care.
CSS Transitions
Primarily handle color and opacity changes — hover states, focus, active. Most CSS transitions use the ease easing curve.
Duration varies by element size:
Classic Interactions
Primarily handle movement — expanding elements, sliding content, animated reveals. Most movement animations use the ease-out-quint easing curve.
Duration varies by element size:
Interactions with GSAP
These animations handle visual polish — entrance effects, element reveals, and zoom effects. They do not react to user hovers or clicks and are mostly independent from user input.
You can safely remove or simplify most* of them without breaking layout or navigation.
*Important exception: GSAP also handles the class toggling in the room accordion (Stay section). For details on how that works, see Tricky parts → Room accordion.
Accessing GSAP animations.
All GSAP animations in this template are built visually — no custom code.
To view or edit them, open the Interactions panel and switch to "Interactions with GSAP" using the version toggle at the bottom of the panel. The lightning bolt icon will then appear in the left sidebar, where you can access all GSAP animations.
Custom Code
The template uses custom code only for icons — arrows, plus signs, and other UI elements rendered via embedded SVG from Lucide, Heroicons, and Simple Icons.
To replace an icon, open the Embed element and swap the SVG code. Browse lucide.dev, heroicons.com, or simpleicons.org to find replacements.
Components
All components in this template are edited in one of two ways — via the Properties panel, or directly inside the component. Each description below tells you which applies.
Primary Button Link
A CTA button for linking to pages or anchor sections. Use the Properties panel to set the link, button text, and label.
Primary Button – Popup
Visually identical to the Primary Button Link, but triggers the popup form instead of navigating to a link. Use the Properties panel to set the visual variant, button text, and label — no link field.
Note: When using this button on a page, make sure the Popup Form component is also placed on the same page.
Popup Form
A fullscreen popup containing an application form, triggered by the Primary Button Popup. It has no properties — edit the form content directly inside the component.
Navbar
The main navigation bar. Use the Properties panel to select a variant (see Navbar Explained below for details) and update the text, destination, and visibility of links.
The navbar includes two CTA button variants — one that opens the application form popup (Primary Button Popup), and one for a custom link (Primary Button Link). By default, the popup button is visible. If you prefer a regular link, hide the popup button and make the link button visible instead.
CTA Banner
A banner placed inside the CTA section. Use the Properties panel to update the eyebrow, heading, background image, button visibility, and the text and link for the active button — Primary Button Popup (opens the popup form) or Primary Button Link (navigates to a page or anchor).
By default, Primary Button Popup is visible and Primary Button Link is hidden.
Program Images
A set of hover-triggered preview images used in the Program section. See Tricky Parts → Program preview images for details.
Timetable Item
A reusable item for schedule in program sections. Use the Properties panel to set the time and text.
Footer
The site footer. It has no properties — edit the content directly inside the component.
Navbar Explained
The template includes three navbar variants — two static and one prepared specifically for the scroll invert animation.
Navbar On Light Bg
Default navbar with a light background and dark elements. Colors pull from global variables.
No scroll behavior — the navbar stays the same regardless of scroll position.
Navbar On Dark Bg
Navbar with a dark background and light elements. Colors pull from global variables.
No scroll behavior — the navbar stays the same regardless of scroll position.
Navbar Scroll Invert
Scroll Invert variant pulls its colors from dedicated tokens:
To change the animation colors:
- Click on the hero section element
- Open the Interactions panel and switch to Classic Interactions
- Find the scroll invert interaction
- Update the variable values inside the timeline keyframes for the initial and final states
Don't reassign the animation to global color variables — this will affect every element on the page that uses those variables, not just the navbar.
Tricky parts
These five areas have specific logic that's easy to accidentally break. Read through each one before editing.
Levels Cards
Each levels-card has two triggers on the same interaction: hover on desktop, and click on tablet and mobile. If you ever remove the interaction and need to restore it, make sure to add back both triggers.
Fullscreen popups
The popup-about-us and popup-form are fullscreen popups — hidden by default (display: none) and revealed via Webflow Interactions. The popup-form is a component — double-click it in the Navigator to enter it.
To edit either popup, temporarily set it to display: flex in the Style panel, make your changes, then set it back to display: none on all breakpoints before publishing.
Slide popups
The slide popup is used in two sections — Team and Instructors. It starts as a small circle that expands on click. Unlike the fullscreen popups, switching to display: flex won't help — the content is still invisible due to its initial position in the animation.
To edit the content, use the Navigator: Slide → Slide content → Slide popup → Slide popup content. Select the heading or text element there and edit in the Settings panel.
Program preview images
Each day-accordion has a preview image that appears on hover and follows the cursor.
To replace it, right-click the image on the canvas, select Edit Component, and replace it in the Settings panel.
To add a new item:
- Duplicate an existing day-accordion
- Unlink the image component instance
- Replace the image and create a new component from it.
- Place the same new component inside the follow-cursor div.
On tablet and mobile there are no hover previews — the section works as a standard accordion.
Room Accordion
On desktop, exactly one room-accordion is always open. The state is controlled by the class is-active, applied to the room-accordion-body and the chevron button. A GSAP script toggles is-active on click — don't rename it or the accordion will stop working. The expanding and collapsing animation is handled by a CSS transition on the room-accordion-body and chevron-button.
To change the default open item, move is-active to a different room-accordion-body and its chevron in the Designer.
To edit content inside a closed item, temporarily add is-active to open it on canvas — remove it before publishing.
The default open item should have the following class combination in the Style Selector:
chevron-button is-active and room-accordion-body is-active
On tablet and mobile, all items open and close independently as a standard accordion.
Troubleshooting
Common issues and how to fix them.
Some navbar elements don't change color on scroll invert
Check that the element's color is set via one of the nav-scroll-* tokens, not a global variable or a color value set directly in the Style panel.
The navbar doesn't change color on scroll
Make sure you're using the Scroll Invert navbar variant, and that the scroll trigger is still attached to the hero section element.
All levels cards stopped responding to hover or click
One of the interaction triggers was removed. Since the interaction is class-based, removing a trigger on one card removes it for all cards in the section. Re-add both triggers — hover for desktop, click for tablet and below.
The room accordion (Stay section) doesn't open or close correctly
Check that is-active is present on both the room-accordion-body and the chevron button of the default open item. If you've renamed either class, the GSAP script won't find them.
I can't find the room accordion open/close animation
It's not in Interactions — it's a CSS transition between the room-accordion-body class and its is-active combo class. To adjust the animation, open the Style panel on room-accordion-body and edit the Transitions property.
An element is animating but I can't find the interaction
It's likely a GSAP animation — these are only visible when the Interactions panel is switched to "Interactions with GSAP". Switch the version toggle at the bottom of the panel to see all GSAP-animated elements.