Instructions

Footer code instructions:

Page fade-out-in

initPageFadeOutLinks();‍
[Global] Page transition (Interaction)

Fades the page out when an internal link is clicked, then fades the new page back in on load. The fade-out is handled in the footer JS (GSAP) — it intercepts clicks on internal links, fades .page-wrapper to opacity 0, then navigates to the new URL.

The fade-in is handled separately by the native [Global] Page transition Interaction (Page Load trigger, opacity 0 → 100) applied to .page-wrapper.

Removing from the Project

  1. In the footer JS, remove initPageFadeOutLinks() from gsap.delayedCall, then delete the initPageFadeOutLinks function entirely.
  2. In the Interactions panel, delete the [Global] Page transition interaction.

Header Scroll

initHeaderScroll();

Adds a background to the header when the page is scrolled down by applying a class. The styled state is visible in the Styleguide hidden header element.

Removing from the Project

In the footer JS, remove initHeaderScroll() from gsap.delayedCall and delete the defined_headerScrollInstance variable and initHeaderScroll function

‍Custom Cursor

initCustomCursor();

Replaces the default pointer with a pill-shaped label when hovering over an element. The label text is set per element via a custom attribute — no code changes needed.

Adding to an Element

In Webflow Designer, select the element → Element Settings → Custom Attributes → add:

  • Name: data-cursor
  • Value: your label text (e.g. View Project)

Removing from an Element

Select the element → Element Settings → Custom Attributes → delete the data-cursor row.

Removing from the Project

  1. Delete/hide the .custom-cursor div from the Header
  2. In the footer JS, remove/comment initCustomCursor() from gsap.delayedCall and delete/comment the defined_customCursorInstance variable and initCustomCursor function
  3. Remove any leftover data-cursor attributes from elements

Logo Slider

initLogoSliders();

Continuously scrolls rows of logos horizontally in an infinite loop. Each row clones itself to create a seamless repeat. Pauses on hover. Multiple rows in the same section work independently.

Required Structure

The section must have the class section-logo-slider, each row inside must have the class logo_slider-row, and the list of logos inside each row must have the class logo_slider-list.

Removing from the Project

In the footer JS, remove initLogoSliders() from gsap.delayedCall and delete the initLogoSliders function

Adjusting the Speed

In initLogoSliders, change the 50 value in distance / 50 — lower is faster, higher is slower.

‍Card Hover Dim‍

initCardHoverDim();

Dims all sibling cards when hovering one, keeping the hovered card at full opacity. Scoped per .card-grid so multiple grids on the same page work independently.

Adding to a Section‍

The grid wrapper must have the class card-grid and each card inside must have the class card-grid-item. No other setup needed.

Removing from the Project

In the footer JS, remove initCardHoverDim() from gsap.delayedCall and delete the initCardHoverDim function

Adjusting the Dim Amount

‍In initCardHoverDim, change the opacity value in the mouseenter handler to your preferred value.

Services Scroll Highlight‍

initServicesAnimation();

Highlights the active service item as the user scrolls through the list. The active item shows its text at full opacity and reveals its info text. All other items are dimmed. Resets to dimmed state when scrolling above the first or below the last item.

Required Structure

‍The section must have the class section-services, each service row must have the class services_item, the title inside each row must have the class services_item-text, and the description must have the class services_item-info.

Removing from the Project

In the footer JS, remove initServicesScroll() from gsap.delayedCall and delete the initServicesScroll function

Adjusting the Dim Amount

‍In resetAll, change the 0.4 opacity value on services_item-text to your preferred dim level.

Testimonial Slider

initTestimonialSlider();

Displays testimonial cards in a draggable slider. On desktop, 3 cards are visible at a time and the row slides horizontally. On mobile, it switches to a centered carousel with one card visible at a time. Both layouts support dot navigation and swipe gestures.

Required Structure

In Webflow, make sure the following CSS classes are applied exactly as listed:

The Section element must have the class section-testimonial-slider. Inside it, add a Div with the class testimonial_slider-mask — this is the visible window. Inside the mask, add another Div with the class testimonial_slider-track — this holds all the cards. Each testimonial card must have the class testimonial_slider-item. Pagination dots (one per card) must each have the class testimonial_slider-dot. The active dot style is controlled by the combo class is-active — style this in Webflow to show which dot is selected.

Removing from the Project

In the Footer Code, remove initTestimonialSlider() from the gsap.delayedCall list, then delete the entire initTestimonialSlider function from the same code block.

Changing How Many Cards Show on Desktop

Find the line var perView = 3; inside the initTestimonialSlider function. Change 3 to however many cards you want visible at once. Dots beyond the last valid position will hide automatically.

Adjusting Swipe Sensitivity

The slider requires dragging at least 25% of a card's width to advance. To make it trigger more easily, find the two instances of 0.25 in the function and lower the value (e.g. 0.15). Raise it (e.g. 0.4) to require a more deliberate swipe.

News Slider

initNewsSlider();

Displays news cards in a draggable slider. On desktop, three cards are shown at once — the center card is full size and active, while the two flanking cards are scaled down to 50%. Clicking a side card brings it to the center. On mobile, it switches to a flat carousel with one card visible at a time. Both layouts support dot navigation and swipe gestures. A minimum of 3 cards is required for the slider to initialise.

Required Structure

In Webflow, make sure the following CSS classes are applied exactly as listed:

The Section element must have the class section-news-slider. Inside it, add a Div with the class news_slider-mask — this is the draggable window. Inside the mask, add a Div with the class news_slider-list — this holds all the cards. Each card must have the class news_slider-card. Inside each card, the text content block must have the class news_slider-textbox — this is hidden on flanking cards and shown only on the active center card. Pagination dots must each have the class news_slider-dot. The active dot style is controlled by the combo class is-active — style this in Webflow to show which dot is selected.

Removing from the Project

In the Footer Code, remove initNewsSlider() from the gsap.delayedCall list, then delete the entire initNewsSlider function from the same code block.

Adjusting the Flank Card Size

On desktop, side cards are scaled to 50% of the center card's size. To change this, find the line var flankScale = 0.5; inside the setupNewsDesktop function and adjust the value — lower shrinks the side cards more, higher brings them closer to full size.

Adjusting the Gap Between Cards

The spacing between cards on desktop is set to 24px. Find the line var gap = 24; inside the setupNewsDesktop function and change the value to suit your layout.

Adjusting Swipe Sensitivity

The slider requires dragging at least 25% of a card's width to advance. To make it trigger more easily, find the two instances of 0.25 in the function and lower the value (e.g. 0.15). Raise it (e.g. 0.4) to require a more deliberate swipe.

Changing the Mobile Breakpoint

The layout switches to mobile mode below 992px. To change this, update the two values in the ScrollTrigger.matchMedia block: (min-width: 992px) and (max-width: 991px). Keep both in sync — they should always target the same breakpoint.

Card Reveal & Count

initCardRevealAndCount();

Animates a group of cards when they scroll into view (80% from the top), once per page load. Two effects run together, controlled independently:

  • Count up: any element with a count-target attribute counts from 0 to its target number, staggered 0.1s per card. Supports decimals (15.32) and suffixes (100+, 500k, 10 mil) — the suffix stays visible throughout the count.
  • Fade up: cards slide up and fade in with the same 0.1s stagger, but only if enabled (see below).

Enabling / disabling fade up
Set the stagger-wrapper attribute's value on the parent element:

  • stagger-wrapper="fade-up" — cards fade up and count up.
  • stagger-wrapper="" (empty) — cards only count up, no motion.

Removing from the Project
In the footer JS, remove initCardRevealAndCount() from gsap.delayedCall and delete the initCardRevealAndCount function.

Removing from a specific element
Remove the count-target attribute from that card's number element — it will no longer count and will display its static text content as-is. It still slides up with the group if fade-up is enabled on the wrapper.

Removing from a specific card group
Remove the stagger-wrapper attribute from that group's parent element — none of its cards will count up or fade up.