Instructions

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

initLogoSliders();

What it does: a row of logos scrolls continuously from right to left in a seamless loop. If a visitor hovers their mouse over the row, it pauses; moving away starts it again.

What it needs: a section with the class section-logo-slider, containing one or more rows with the class logo_slider-row. Each row needs a list of logos with the class logo_slider-list. Add as many logos into that list as you like — the slider automatically duplicates them to create the seamless loop.

How to remove it: delete the section, or remove the section-logo-slider class. Without that class, the logos will simply sit still.

initServicesAnimation();

What it does: as a visitor scrolls through a list of services, the service currently in view is highlighted (full brightness with its extra info visible), while the others fade to a dimmer, inactive look.

What it needs: each service block needs the class services-item. Inside each one, the title/heading needs the class services_item-text, and the extra details needs the class services_item-info.

How to remove it: remove the services-item class from the blocks (or delete the section). All items will then display normally, without fading or highlighting.

initTestimonialSlider();

What it does: a carousel of testimonial cards. On desktop, three cards show at once and visitors can click the dots below or drag the cards to move through them. On mobile, cards stack and can be swiped or moved with the dots one at a time.

What it needs:

• A section with the class section-testimonial-slider
• A masking container inside it with the class testimonial_slider-mask
• A track inside the mask with the class testimonial_slider-track
• Each testimonial card needs the class testimonial_slider-item
• Navigation dots (one per card, or matching your desired count) need the class testimonial_slider-dot

How to remove it: delete the section, or remove the section-testimonial-slider class. Without it, the cards will just display as a static, non-sliding list.

initCardRevealAndCount();

This component fades in a row or grid of cards as the visitor scrolls to them, and animates any numbers inside those cards counting up from 0 to their final value. It runs once per page load, the first time the cards come into view.

What you need to set up

1. Wrap your cards. Select the parent element that holds all the cards (the row or collection list wrapper) and add a custom attribute: stagger-wrapperLeave the value empty if you only want the numbers to count up. Set the value to fade-up if you also want the cards to fade and slide into place.
2. Mark the numbers. On each element that should count up (this can be the card itself, or a text element inside the card), add a custom attribute: count-target. Set the value to the final number you want displayed. You can include a suffix, for example 250+, 98%, or 1.5M. The counter will match any decimal places you include (for example, 4.5 will count up showing one decimal place).

How it behaves

• Nothing happens until the card wrapper scrolls to about 70% up the visitor's screen.
• Each card animates slightly after the one before it, creating a staggered effect rather than everything appearing at once.
• The animation only plays once per page load — scrolling back up and down again will not replay it.
• If fade-up is not set on the wrapper, the cards will simply appear in place (no fade or slide), but the numbers will still count up.

How to remove it

To turn this off for a section, simply delete the stagger-wrapper attribute from the wrapper element. If you only want to stop the number counting but keep the fade-up effect, remove the count-target attribute from the relevant elements instead.

Troubleshooting

• Nothing animates at all: check that the stagger-wrapper attribute is on the correct parent element, and that it actually contains child elements (cards).
• Numbers don't count up: check that count-target is spelled correctly and that its value starts with a number (for example 120, not +120).
• Cards appear instantly instead of fading: make sure the stagger-wrapper attribute's value is exactly fade-up.

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

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

initFadeUp();

Elements gently fade in and slide up as they scroll into view. You can apply it to any element, group items so they appear one after another, and adjust the timing.

Apply it to a single element

1. Select the element on the canvas.
2. Open Element Settings (the gear icon).
3. Under Custom Attributes, click the plus and add:
4. Name: data-fade-up
5. Publish. The element now fades up the first time it scrolls into view.
6. Value: leave empty

You can put this on anything — a heading, an image, a card, or a whole wrapper. A wrapper fades up as one block; that's often what you want.

Make a group appear one-by-one (stagger)

1. Select the parent wrapper that holds the items.
2. Add a custom attribute:
3. Name: data-fade-group
4. Add data-fade-up (empty value) to each child you want to animate.
5. Value: the delay between each item, in seconds — for example 0.15
6. Publish. The children now fade up in sequence instead of all at once.

Tips:

• Leave the group value empty and it uses a default of 0.1.
• Use 0 as the value to make every item appear at the exact same moment.

Change how fast items stagger

Just edit the data-fade-group value on the wrapper — no code needed.

• 0.1 — quick, tight sequence
• 0.2 — medium
• 0.3 — slow and dramatic

Change speed, feel, distance, or trigger point

These are global settings at the very top of the script. Open the code where it's pasted and edit these lines:

var duration = 1;
var ease = "power4.out";
var start = "top 80%";
var distance = 40;

• Duration — how long the animation runs, in seconds. Lower is faster.
• Ease — the motion feel. Try "power2.out" (softer), "expo.out" (snappier), or "none" (linear).
• Start — when the animation fires. The first word is a point on the element, the percentage is a point on the screen (0% top, 100% bottom). "top 80%" fires when the element's top reaches 80% down the screen. Raise the number toward "top 100%" to fire earlier; lower it toward "top 50%" to wait until the element sits further up.
• Distance — how far the element slides up, in pixels. Higher is a bigger move; lower is subtler.

These are global, so a change affects every fade-up on the site.

Where to put the attribute

Put data-fade-up on the thing you actually want to reveal:

• One element (heading, image, button) — it fades up on its own.
• A wrapper — the whole block fades up together as a single item.

If a wrapper is taller than the screen, it reveals when its top scrolls in, so its lower part is already visible by the time you reach it — that's normal for a one-time reveal. If you want each child to reveal separately as it enters, put data-fade-up on each child instead of the wrapper (and don't use a group).

Remove it from one element

Delete the data-fade-up attribute from that element. If it was part of a group and you want the whole group off, also remove data-fade-group from the wrapper.

Remove it completely

1. Delete the fade-up script from wherever it's pasted — Project Settings → Custom Code, a Page's custom code, or an Embed element.
2. If you added the optional CSS line [data-fade-up] { opacity: 0; }, remove that too, otherwise those elements can stay hidden.

Attribute reference

• data-fade-up — put on any element, leave the value empty. Fades that element up on scroll.
• data-fade-group — put on a wrapper, value in seconds like 0.15 (or 0 for all at once). Makes the data-fade-up children inside it appear one after another.