Help

This page explains how the template works under the hood — every custom system, every animation, every technical decision.

Overview

The template combines native Webflow components with a carefully selected set of custom systems: marquees, scroll animations, a tabs slider, a two-tier navigation, and Lenis smooth scrolling. Everything is designed to stay editable in the Designer.

Where the code lives

Open Site Settings → Custom Code to find the global scripts. Page-level overrides, where present, live in the page's own custom code panel.

What is included

Magic Navigation — GSAP-powered desktop mega-menu and mobile drawer, both bound to data attributes.
Inverted Navigation — automatically switches the nav bar to its light/dark variant over marked sections.
GSAP Interactions — scroll animations built inside Webflow Interactions, triggered by data attributes.
Draggable Marquee — a horizontal marquee you can drag and throw, powered by GSAP Observer and ScrollTrigger.
Vertical Ticker — an auto-scrolling, looping card ticker with a centred active state.
Industry Switcher — hover a list item and its matching background image crossfades in.
Typing Dots — an animated, chat-style “typing…” indicator.
Infinite Slider — clones a native Webflow slider's slides so it loops endlessly.
Smooth Scroll — Lenis smooth scrolling connected to GSAP's ticker.
Type Smoothener — minimal global font-smoothing declarations.

Required libraries

The template assumes GSAP, ScrollTrigger, and Observer are loaded globally before any of the custom scripts run. The Draggable Marquee needs Observer specifically; everything else GSAP-based needs GSAP and ScrollTrigger. If you're using Lenis smooth scrolling, it needs to load before the Smooth Scroll snippet too. The Infinite Slider is the one exception — it's plain jQuery, already loaded by Webflow, and doesn't touch GSAP at all.

Number Odometer

Rolling odometer animation for numbers on scroll. Each digit gets its own vertical strip (0–9) that scrolls into place like a mechanical counter. Non-digit characters (€, %, +, ., etc.) stay static in place.

Required attributes

data-odometer (required) — the element containing the number; its text content is the end value the digits roll to.
data-odometer-group (optional) — wrapper around multiple odometers; when present, the group itself is used as the scroll trigger so all odometers inside animate together.

Tuning

data-odometer-start (optional) — the digit each strip starts on. Defaults to 0.
data-odometer-duration (optional) — roll duration in seconds. Defaults to 1.2.
data-odometer-ease (optional) — any GSAP easing string. Defaults to power3.out
data-odometer-stagger (optional) — delay in seconds between each digit starting its roll. Defaults to 0.03.

Draggable Marquee

A horizontal marquee that scrolls on its own, can be dragged and thrown with the mouse or a finger, and pauses automatically while it's off screen. Built with the GSAP ticker, Observer, and ScrollTrigger — no Swiper, no third-party marquee plugin.

What it does

Build the marquee as a track containing one set of items. The script clones that set automatically until the track is wide enough to loop seamlessly, so you never duplicate content by hand.

data-marquee="true" — the marquee wrapper.
data-marquee-track — the moving track inside it.
data-marquee-list — the one set of items to loop; gets cloned as needed.
data-speed="60" — pixels per second (optional, defaults to 60).
data-direction="left" — or "right" (optional, defaults to left).

Dragging and pausing

Dragging is powered by GSAP Observer. Grab the marquee, throw it, and it keeps coasting on the released velocity before settling back into its automatic speed and direction — throw it the other way and the marquee reverses direction. A ScrollTrigger pauses the whole thing whenever it scrolls out of view, so it never animates off screen.

How to remove

Delete the Draggable Marquee script block from the global custom code, or remove the data-marquee attribute from a specific wrapper to stop just that one.

GSAP Interactions

Most animations in the template are scroll-triggered Webflow Interactions that run GSAP under the hood. Each interaction is bound to a custom data attribute rather than a class. This keeps the system declarative — to animate an element, you add the attribute. To stop animating it, you remove the attribute.

For quick reference, the six attributes and where each one goes:

data-gsap="fade" — single element fade-in.
data-gsap="stagger" — parent element, animates direct children.
data-gsap="text" — text wrapper, runs heading split + tag fade + body reveal.
data-gsap="parallax" — wrapper with .media-fill child, subtle parallax.

Why data attributes

Non-destructive — adding or removing an attribute never affects an element's classes or styling.
Reusable — the same animation can be applied to any element on any page without touching the interaction itself.
Easy to audit — you can scan the Webflow Designer's attribute panel to see which elements animate and how.

Where the interactions are defined

All interactions live in the project's Interactions panel under names prefixed with [DATA-GSAP]. They use Webflow's "Element Trigger → On Scroll" with the trigger set to a custom attribute selector. The animation logic itself is built with GSAP timelines inside the Action.

Fade

A simple fade-in. The element appears with an opacity transition as it enters the viewport. It is the workhorse animation of the template and the safest default when you want something to feel intentional without drawing attention to the motion itself.

Attribute: data-gsap="fade"
Best for: images, individual cards, body text, single buttons, section content blocks.
Visual: the element fades from invisible to fully visible as it enters the viewport.
To remove: delete the data-gsap attribute from the element.

Stagger

Animates multiple child elements in sequence. The trigger element itself does not animate — its direct children do, one after the other. This is the right choice for any list-like layout where items should reveal as a group.

Attribute: data-gsap="stagger" (placed on the parent / wrapper element).
Best for: grids of cards, feature lists, gallery rows, navigation lists, tag groups.
Visual: children fade and slide in one after another in source order.
To remove: delete the attribute from the parent. Children return to their static state.
Note: the script targets direct children, so wrap your items in a single parent and avoid nesting extra wrapper divs around individual items.

Text

A composite text animation built for typographic content. It runs three coordinated actions: a heading split, a tag fade, and a body text reveal. Use it on text-heavy sections where you want a refined, progressive reading experience.

Attribute: data-gsap="text" (on the section or text wrapper).
Best for: hero sections, section intros, editorial blocks, anywhere a heading, eyebrow tag and paragraph appear together.
Visual: the heading reveals in a split, the eyebrow tag fades in, and the supporting body text animates in sequence.
To remove: delete the attribute from the wrapper.
Note: works best when applied to a wrapper that contains a heading, an optional tag and supporting text. If the wrapper holds only one of these, the unused actions simply have nothing to animate.

Parallax Media

Adds a subtle vertical parallax movement to media as the viewport scrolls past it. The interaction looks for an inner .media-fill element inside the trigger and moves it relative to the scroll position. The outer trigger element does not move — only the media inside.

Attribute: data-gsap="medium"
Required structure: the trigger element must contain a child with the class .media-fill.
Best for: hero images, section background imagery, large editorial photos, any framed media.
Visual: the inner media drifts vertically against the scroll, giving the section gentle depth.
To remove: delete the attribute from the trigger element.

Magic Navigation

The template ships with two coordinated navigation scripts — one for desktop (≥ 992 px) and one for mobile (≤ 991 px). Both are GSAP-driven and bound entirely to data attributes.

Desktop behaviour

On hover of a [data-menu] element, the panels wrapper expands to the height of the matching panel, which fades in. The overlay fades in behind the page.
Moving the cursor off the nav starts a 120 ms timer; if the cursor does not return, the panel closes and the nav loses its solid class.
Hovering a [data-menu-close] link closes the active panel immediately.

Tuning

Hover delay before close — change the 120 value (ms) in the desktop mouseleave handler.
Open / close durations — adjust the duration values inside openMenu, closeMenu, openPanel, and closePanel.
Breakpoint — the desktop script fires at min-width: 992px, mobile at max-width: 991px. Change both values together if you move your breakpoint.

Required attributes

data-nav-content — desktop nav wrapper. Scope for the desktop script.
data-nav-panels — panels container. The expanding area below the nav bar.
data-navigation-overlay — full-page overlay (optional). Dims the page behind an open panel.
data-menu="[name]" — each nav menu trigger. Opens the panel with the matching name on hover.
data-panel="[name]" — each panel. Must match a data-menu name exactly.
data-mobile-nav — mobile nav wrapper. Scope for the mobile script.
data-mobile-menu — mobile menu drawer. The content that expands on open.
data-mobile-menu-toggle — hamburger / close button. Toggles open and close.

Regular links in the top navigation — any link inside data-nav-content that doesn't carry data-menu — close the open dropdown automatically when hovered. No extra attribute needed. Links inside the dropdown panels are excluded from this, so moving into a panel to click something never closes it early.

Mobile behaviour

The script is scoped to viewports ≤ 991px and does nothing on desktop.
The nav bar is locked to its closed height, measured automatically from the DOM — no CSS variable to set. On toggle it expands to scrollHeight and the menu drawer fades in, while the hamburger icon animates into an X. On close, everything reverses.

No CSS variable needed

Earlier versions of this script needed a CSS variable for the mobile nav's closed height. The current version measures it automatically — on load and on every breakpoint change — so there's nothing to configure. If the mobile menu ever measures wrong after a big layout change, that's usually a sign the toggle button or menu wrapper moved outside data-mobile-nav.

To remove

Desktop mega-menu — delete the Magic Navigation desktop script block and the data-nav-content, data-nav-panels, data-menu, data-panel, and data-navigation-overlay attributes.
Mobile drawer — delete the Magic Mobile Navigation script block and the data-mobile-nav, data-mobile-menu, and data-mobile-menu-toggle attributes.

Industry Switcher

Hover an item in a list and its matching background image crossfades in behind it, while the rest of the list dims. Built for things like an industries or use-cases list next to a changing visual.

Required attributes

data-industry-list — the list wrapper.
data-industry-item — each hoverable item, paired with a data-industry-index number.
data-industry-bg — each background layer, using the same data-industry-index number as its matching item.
data-industry-default-bg — the background shown when nothing is hovered.
data-industry-scope (optional) — wraps the backgrounds if they don't live in the same section as the list.

How it behaves

Hovering an item brings its background to full opacity and dims the other list items.
Leaving the whole list waits 2 seconds before fading back to the default background, so briefly moving between items doesn't flicker back and forth.
Hovering triggered by page scroll — the cursor staying still while the list scrolls under it — is ignored, so scrolling never fires a hover by accident.

Tuning

Dim opacity — change the 0.32 value for inactive list items.
Return delay — change the 2 (seconds) value before the default background returns.

How to remove

Delete the Industry Switcher script block and the data-industry-list, data-industry-item, data-industry-bg, data-industry-default-bg, and data-industry-index attributes.

Inverted Navigation

Automatically switches the navigation bar's colour variant whenever it sits over a section you've marked as dark, so the nav never gets lost against a dark hero or a dark section.

Required attribute

Add data-nav="inverted" to any full-width section the navigation should invert over. The value must be the exact string inverted.

How it behaves

On every scroll and resize, the script checks a point just below the nav bar. If that point falls inside a section marked data-nav="inverted", the nav bar gets an inverted class; otherwise it doesn't. It also re-checks after the page finishes loading and after any ScrollTrigger refresh, so late-loading images or dynamic content won't leave it stuck in the wrong state.

How to remove

Delete the Inverted Navigation script block and the data-nav="inverted" attribute from any sections using it.

Infinite Slider

Makes a native Webflow slider loop endlessly in both directions. This is the one system in the template that isn't GSAP — it's plain jQuery, already loaded by Webflow, working on top of Webflow's own Slider component and IX2 interactions.

Required attributes

data-slider-loop="true" — put this on the .w-slider element itself.
data-slider-clones — how many full slide sets to clone on each side (optional, defaults to 3).
data-slider-start — which original slide to open on, zero-based (optional, defaults to 0).

How it works

On page load, the script clones the slider's original slides several times on both sides of the real set, so there's always a slide to scroll to in either direction. It then re-triggers Webflow's own slider redraw and IX2 initialisation so any interactions on the cloned slides still work, and finally jumps to the chosen starting slide using the slider's native nav dots.

How to remove

Delete the 108 Infinite Slider script block and the data-slider-loop, data-slider-clones, and data-slider-start attributes. The slider falls back to Webflow's regular, non-looping behaviour.

Vertical Ticker

A vertical list of cards that scrolls upward one step at a time, on a loop, with the centred card marked as active. Good for logos, testimonials, or any short recurring list you want in motion without a carousel.

Required attributes

data-ticker — the ticker wrapper.
data-ticker-list — the moving list inside it.
data-ticker-card — each card; the script clones your set automatically to loop endlessly.
data-interval="2.2" — seconds between steps (optional).
data-shift="0.6" — seconds per step animation (optional).

How it behaves

The centred card gets an is-active class partway through each step. The ticker pauses automatically via ScrollTrigger whenever it's scrolled out of view.

How to remove

Delete the Vertical Ticker script block and the data-ticker, data-ticker-list, and data-ticker-card attributes.

Typing Dots

A looping, chat-style “typing…” indicator — three dots that rise and fall in a wave, on repeat, built with GSAP.

Required attributes

data-typing — the chat bubble wrapper.
data-typing-dot — each dot inside it (usually three).

Each dot rises, falls, and pauses in sequence, offset from the next by 0.12s, so the wave visibly travels left to right before it loops.

Tuning

Wave speed — change the 0.22 / 0.28 duration values on the rise and fall tweens.
Offset between dots — change the 0.12 stagger value used for each dot's start time.
Pause between loops — change the 0.5s pause at the end of the timeline.

How to remove

Delete the Typing Dots script block. The dots stay static wherever they're placed — remove data-typing and data-typing-dot if you're also removing the markup.

Lenis Smooth Scroll

The template can use Lenis for smooth scrolling. Lenis interpolates the browser's native scroll into a frame-based loop and integrates directly with GSAP's ticker — so it's not a separate motion system, it's the driver that keeps ScrollTrigger in sync. The script is not included by default. If you want smooth scrolling, paste the snippet below into your project's custom code.

What it does

Paste the script below before the closing </body> tag in Site Settings → Custom Code.
Make sure GSAP and ScrollTrigger are loaded before this snippet.
Only one global smooth scroll instance per page — do not duplicate.

The script

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.css" />
<script src="https://cdn.jsdelivr.net/npm/lenis@1.2.3/dist/lenis.min.js"></script>
<script>
  /**
   * 108™ Smooth Scroll
   *
   * What this is:
   * - Lenis smooth scrolling connected to GSAP.
   *
   * What it does:
   * - Creates smoother page scrolling.
   * - Keeps ScrollTrigger in sync with Lenis.
   * - Uses GSAP's ticker to drive Lenis on every frame.
   *
   * Instructions:
   * - Load Lenis before this script.
   * - Load GSAP and ScrollTrigger before this script.
   * - Add this globally in the project head or before the closing body tag.
   * - Use only one global smooth scroll setup per page.
   */

  const lenis = new Lenis();

  lenis.on('scroll', ScrollTrigger.update);

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);
</script>

How to remove

Delete the script block. The page returns to native browser scrolling. ScrollTrigger and all GSAP animations continue to work normally — no other changes needed.

Light and Dark

The template does not use a global dark-mode toggle. There is no class you flip on the body to invert the entire site. Instead, dark sections are achieved with Webflow Variable Modes — specifically, by setting a section's variable color mode to Inverted Mode.

How it works

The template defines all colors as variables — surface, text, border, accents — rather than hard-coded hex values.
Light sections use the default variable mode.
Dark sections are individual sections with their variable mode set to Inverted. Every variable inside that section resolves to its inverted equivalent.
Child elements automatically inherit the inverted values, so no extra dark-mode classes are needed.

Why this approach

Tagging every element with a duplicated dark-mode class would double the styling work and make the template fragile to extend. With variable modes, you change one setting on the section and every color token resolves correctly. It also means the template could support a global dark mode if you ever wanted to add one — by switching the mode at a higher level — without rewriting any styling.

Customizing dark colors

To change how dark sections look, edit the values inside the Inverted variable mode, not the inverted-section instances themselves. One change there propagates to every dark section in the project. The same applies to light colors and the default mode.

Adding a new dark section

Add or duplicate a section in the Designer.
Select the section and switch its Variable Mode to Inverted.
Do not assign any extra dark-mode utility classes to the children — they will resolve correctly through inheritance.

What to avoid

Do not hard-code colors inside section content. Always reference variables. A hex value will not respond to mode switching and will look wrong in inverted sections.

SVG Icons and Logos

All icons and logos in the template are inline SVGs placed inside Code Embed blocks, not uploaded through the media browser. This is the only setup that lets them recolor themselves through the variable system and invert correctly in dark sections.

Why Code Embeds, not images

currentColor — inline SVGs can use fill="currentColor" and stroke="currentColor", which inherits the CSS color of the parent. The icon adopts whichever variable is active in that section.
Image uploads can't do this — media browser SVGs render as <img> tags, which cannot inherit colors.
Sharpness and scaling — same advantages as any SVG: clean at any size, any pixel density.

How to swap an icon

Select the icon, click the gear icon on the Code Embed.
Delete the existing code, drag your new SVG file into the code box. If drag-drop fails, open the SVG in a text editor and paste the code in.

How to make any new SVG fit the template

Most SVG files ship with hard-coded colors and explicit dimensions. A couple of edits make any new icon behave like the ones already in the template:

Recolor — replace every fill="#..." and stroke="#..." with fill="currentColor" and stroke="currentColor". The icon now follows the active color variable.
Resize — remove the width and height attributes from the opening <svg> tag. Keep the viewBox. The icon now respects the size set by its parent class.

Quick checklist

Code Embed, not Image element.
All colors → currentColor.
width and height removed from the SVG tag, viewBox kept.
Logos only: style="height:100%;" added, unique class with ratio set.

‍

How to Remove or Disable Effects

Every system in the template can be removed independently. None of them depend on each other.

Remove smooth scrolling

Delete the Lenis stylesheet link, the Lenis script tag, and the Smooth Scroll script block from the global custom code. The page returns to native browser scrolling.

Remove the Draggable Marquee

Delete the Draggable Marquee script block from the global custom code, or remove the data-marquee attribute from a specific wrapper to stop just that one loop.

Remove a single scroll animation

Delete the data-gsap attribute from the element.

Remove all scroll animations

Open the Webflow Interactions panel and delete the interactions prefixed with [DATA-GSAP]. The data attributes can stay on the elements — without an interaction listening to them, they have no effect.

Remove the Magic Navigation

Delete the Magic Navigation script blocks (desktop and mobile). Remove data-nav-content, data-nav-panels, data-menu, data-panel, data-navigation-overlay, data-mobile-nav, data-mobile-menu, and data-mobile-menu-toggle from the elements.

Remove the type smoothener

Delete the 108™ Type Smoothener style block from the global custom code. Typography returns to browser defaults.

Remove the Vertical Ticker

Delete the Vertical Ticker script block and the data-ticker, data-ticker-list, and data-ticker-card attributes. The cloned cards it generates at runtime disappear with it — nothing to clean up by hand.

Remove the Industry Switcher

Delete the Industry Switcher script block and the data-industry-list, data-industry-item, data-industry-bg, data-industry-default-bg, and data-industry-index attributes.

Remove Typing Dots

Delete the Typing Dots script block and the data-typing and data-typing-dot attributes.

Remove Inverted Navigation

Delete the Inverted Navigation script block and the data-nav="inverted" attribute from any sections using it. The nav bar keeps whatever variant it's set to by default.

Remove the Infinite Slider

Delete the 108 Infinite Slider script block and the data-slider-loop, data-slider-clones, and data-slider-start attributes. The slider falls back to Webflow's regular, non-looping behaviour.

Best Practices

Don't duplicate global scripts

The marquee, navigation, smooth scroll, and tabs scripts are designed to run once per page. Adding them to a page's custom code while they already exist globally will cause double initialization and unpredictable behaviour.

Use attributes over classes for animation

All scroll animations are bound to data attributes by design. Adding a class will not trigger the animation. Adding the attribute will.

Keep the nav attribute names exact

The Magic Navigation scripts match panels to menus by the value of their data-menu and data-panel attributes. If the values don't match exactly (including capitalisation), the panel will not open.

Use variables, not hex codes

Hard-coded colors inside content break the inverted-section logic. Always pick from the project's color variables.

Test scroll animations in Preview

The Webflow Designer canvas does not run the GSAP-driven interactions in their final form. Always check animations in Preview or on the published site.

One Lenis instance only

Do not create a second Lenis instance anywhere on the page or in page-level custom code. The global instance already handles everything, including ScrollTrigger sync.

Don't delete the state classes the scripts add

solid, open, is-active, inverted, and is-clone don't exist anywhere until a script adds them at runtime — so it's easy to assume they're unused and delete them from the Designer's style panel. Leave them defined even at 0 elements; the moment a script toggles one on, it needs real CSS to fall back on. The same goes for the "ready" flags scripts set on themselves (data-marquee="ready", data-industry-list="ready", data-ticker="ready") to avoid initialising twice — don't hand-edit those values.

Match data-nav="inverted" exactly

The Inverted Navigation script matches on the literal string data-nav="inverted" — not "invert", not "true". Copy the attribute value exactly, including capitalisation, or the section is silently ignored.

Leave marquee, slider, and ticker clones alone

The Draggable Marquee, Vertical Ticker, and Infinite Slider all duplicate your original item set at runtime and mark the copies with data-marquee-clone, data-ticker-clone, or is-clone. Only edit the original set — editing or deleting a clone by hand just gets overwritten, or breaks the loop, the next time the page reloads.