Help
This page explains how the template works under the hood — every custom system, every animation, every technical decision.
The template combines native Webflow components with a small, carefully selected set of custom systems: marquees, GSAP-powered scroll animations, and a variable-mode-driven dark section system. Optional add-ons — smooth scrolling and infinite slider looping — are included as paste-in snippets in their respective sections. Everything is designed to stay editable in the Designer.
Overview
The template ships with a small set of custom scripts and a single global stylesheet. Everything lives either in the project's global head/footer code or in page-level custom code. Nothing is injected at runtime.
What is included
- GSAP Marquee — simple GSAP loop for horizontal scrolling content, both directions.
- GSAP Scroll Interactions — built inside Webflow Interactions, triggered by data attributes.
- Font Smoothing — minimal global font-smoothing declarations.
Optional add-ons
- Lenis Smooth Scroll — paste-in snippet, integrates with the GSAP ticker.
- Infinite Slider — paste-in snippet that adds seamless looping to the native Webflow slider.
Required libraries
The template assumes GSAP and ScrollTrigger are loaded globally before any of the custom scripts run.
Where the code lives
Open Site Settings → Custom Code to find the global scripts.
GSAP Marquee
The template uses a simple GSAP loop to create horizontal marquees moving in either direction. The animation runs on any element with a
data-marquee attribute.What it does
Build the marquee content as a single horizontal track that contains your items duplicated once — so the loop can travel the full width of the original set and then snap back invisibly. Add one of these attributes to the track:
data-marquee="left"— moves right to left.data-marquee="right"— moves left to right.
Tuning
- Speed — change the
durationvalue. Higher = slower. Lower = faster. - Direction — pick the attribute that matches the direction you want.
- Why -50% — because the track contains the item set duplicated, moving by half its width loops back to the visually identical starting point.
The script
<script>
gsap.to('[data-marquee="left"]', {
x: "-50%",
duration: 20,
repeat: -1,
ease: "none"
});
gsap.fromTo('[data-marquee="right"]',
{ x: "-50%" },
{ x: "0%", duration: 20, repeat: -1, ease: "none" }
);
</script>How to remove a marquee
Delete the
data-marquee attribute from the track, or remove the script block to disable all marquees on the page.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-scroll="fade"— single element fade-in.data-gsap-scroll="fade-late"— delayed fade-in.data-gsap-scroll="stagger"— parent element, animates direct children.data-gsap-scroll="text"— text wrapper, runs heading split + tag fade + body reveal.data-parallax="medium"— wrapper with.media-fillchild, subtle parallax.data-parallax="strong"— same, stronger 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]. 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-scroll="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-scrollattribute from the element.
Fade Late
Identical to Fade, but slightly delayed. Use it when you want one element to come in just after another for a more natural reading flow — for example a paragraph after its heading, or a CTA after its supporting copy.
- Attribute:
data-gsap-scroll="fade-late" - Best for: the second or third element in a small group where Fade is already used.
- Visual: same fade-in as Fade, with an added delay so it follows the previous element.
- To remove: delete the attribute, or change it to
fadeto remove only the delay.
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-scroll="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-scroll="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-parallax="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.
Parallax Media Strong
Same mechanism as Parallax Media, but with a stronger, more noticeable movement. Use it sparingly — typically once per page, on a single feature image. Overusing strong parallax across multiple sections quickly feels heavy.
- Attribute:
data-parallax="strong" - Required structure: same as Parallax Media — needs a child
.media-fill. - Best for: a single hero or signature image per page.
- Visual: the inner media drifts more visibly than the medium variant.
- To remove: delete the attribute, or change it to
mediumto soften the effect.
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"andstroke="currentColor", which inherits the CSScolorof 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 few edits make them fit the system:
- Recolor — replace every
fill="#..."andstroke="#..."withfill="currentColor"andstroke="currentColor". The icon now follows the active color variable. - Stroke width — for stroked icons, replace any hard-coded
stroke-width="..."withstroke-width="var(--_⚡️-icons---icon-strk)". The stroke is then driven by the global icon-stroke variable, so a single change in the variable updates every icon at once. - Resize — remove the
widthandheightattributes from the opening<svg>tag. Keep theviewBox. The icon now respects the size set by its parent class.
Quick checklist
- Code Embed, not Image element.
- All colors →
currentColor. widthandheightremoved from the SVG tag,viewBoxkept.- 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
If you added the Lenis snippet from the Smooth Scroll section, delete it from the global custom code. The page returns to native browser scrolling.
Remove the marquee
Delete the marquee script block from the global custom code, or remove the
data-marquee attribute from individual elements you want to stop animating.Remove a single scroll animation
Delete the
data-gsap-scroll or data-parallax attribute from the element.Remove all scroll animations
Open the Webflow Interactions panel and delete the interactions prefixed with
[DATA]. The data attributes can stay on the elements — without an interaction listening to them, they have no effect.Remove the type smoothener
Delete the
108™ Type Smoothener style block from the global custom code. Typography returns to browser defaults.Best Practices
Don't duplicate global scripts
The marquee scripts — and any optional add-ons you paste in (Lenis, Infinite Slider) — 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 original markup intact
The infinite slider relies on detecting the original slides versus its own clones. Do not manually duplicate slides in the Designer. Do not remove the
.is-clone class from cloned slides at runtime.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.
Infinite Slider (Optional)
The native Webflow slider does not loop seamlessly — when it reaches the last slide, it jumps back to the first. The template ships with the slider attributes already set up, but the script that powers the seamless loop is not included by default. If you want the loop, paste the snippet below into your project's custom code.
Setup
- In the Webflow slider settings, uncheck "Infinite repeat slides". The script handles looping.
- The required custom attributes are already added to the slider in this template:
data-slider-loop="true"— enables the loop logic.data-slider-clones="3"— number of slide sets cloned on each side. Default 3.data-slider-start="0"— index of the original slide visible on load. Zero-based.
- Paste the script below before the closing
</body>tag in Project Settings → Custom Code, or in the page's custom code area.
The script
<script>
/**
* 108™ Infinite Slider
*
* What this is:
* - An infinite loop system for native Webflow sliders.
*
* What it does:
* - Clones the original slide set before and after the real slides.
* - Redraws the Webflow slider after DOM changes.
* - Reinitializes IX2 if cloned slides contain interactions.
* - Sets the chosen starting original slide.
*
* Instructions:
* - Add these attributes to the slider element:
* - data-slider-loop="true"
* - data-slider-clones="3"
* - data-slider-start="0"
*
* Example:
* - <div class="w-slider"
* data-slider-loop="true"
* data-slider-clones="3"
* data-slider-start="0">
*
* Notes:
* - data-slider-clones = number of full slide sets added on each side.
* - data-slider-start = starting ORIGINAL slide index, based on 0.
* - This script runs on window load for more reliable Webflow timing.
*/
$(window).on('load', function () {
$('[data-slider-loop="true"]').each(function () {
var $slider = $(this);
/* Prevent double initialization in Webflow re-runs. */
if ($slider.attr('data-clones-initialized') === 'true') return;
$slider.attr('data-clones-initialized', 'true');
/* Read clone count from attribute and fall back safely. */
var cloneCount = parseInt($slider.attr('data-slider-clones'), 10);
if (isNaN(cloneCount) || cloneCount < 1) cloneCount = 3;
/* Read starting original slide index and fall back safely. */
var startIndex = parseInt($slider.attr('data-slider-start'), 10);
if (isNaN(startIndex) || startIndex < 0) startIndex = 0;
/* Find the native Webflow slider mask. */
var $mask = $slider.find('.w-slider-mask').first();
if (!$mask.length) return;
/* Use only original slides, not previously cloned ones. */
var $slides = $mask.children('.w-slide').not('.is-clone');
var originalCount = $slides.length;
if (!originalCount) return;
/* Clone original slides before the real set. */
for (var i = 0; i < cloneCount; i++) {
$slides.clone().addClass('is-clone').prependTo($mask);
}
/* Clone original slides after the real set. */
for (var j = 0; j < cloneCount; j++) {
$slides.clone().addClass('is-clone').appendTo($mask);
}
/* Redraw native Webflow components after cloning. */
function redrawSlider() {
try {
if (window.Webflow && Webflow.require) {
Webflow.require('slider').redraw();
try {
Webflow.require('tabs').redraw();
} catch (e) {}
}
} catch (e) {}
}
/* Reinitialize IX2 in case cloned slides contain interactions. */
function reinitIx() {
try {
if (window.Webflow && Webflow.require) {
Webflow.require('ix2').init();
}
} catch (e) {}
}
/* Move to the selected ORIGINAL slide using native nav dots. */
function setStartSlide() {
var $navDots = $slider.find('.w-slider-nav').children();
var safeStartIndex = Math.min(startIndex, Math.max(originalCount - 1, 0));
if ($navDots.length && $navDots.eq(safeStartIndex).length) {
$navDots.eq(safeStartIndex).trigger('click');
}
}
/* Run setup in short phases for more reliable Webflow timing. */
redrawSlider();
setTimeout(function () {
redrawSlider();
setTimeout(function () {
reinitIx();
setTimeout(function () {
redrawSlider();
setStartSlide();
}, 120);
}, 120);
}, 120);
});
});
</script>Tuning
- Clone count — increase if the slider is very wide or slides are narrow, decrease if it feels heavy.
- Start index — pick which original slide is active on load. Out-of-range values are clamped.
To remove
Delete the script block. The slider returns to native Webflow behaviour. The attributes can stay on the element — without the script listening, they have no effect.
Smooth Scroll (Optional)
The template uses 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.
What it does
- 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.
