Instructions
This page explains how the template works under the hood — every custom system, how to tune it, and how to switch it off. Nothing here is required reading to launch the site: Zeyna works as delivered. Come back when you want to change how something behaves.
Almost every effect is driven by a data attribute rather than a class or a Webflow interaction. To animate an element you add an attribute in the Designer's settings panel; to stop animating it you delete that attribute. Nothing about your styling changes either way.
Overview
Zeyna combines native Webflow components with a small set of custom systems: scroll animation, section pinning, a filterable works grid, two sliders and optional smooth scrolling. Everything stays editable in the Designer — no part of the template requires you to write code.
Where the code lives
All template scripts sit in a single Embed inside the GSAP component, at the very bottom of every page. Open the GSAP component to edit it once and update every page at the same time.
Required libraries
GSAP with the ScrollTrigger, Draggable, InertiaPlugin, Flip and SplitText plugins, loaded from Webflow's own CDN in Site Settings → Custom Code. They are free to use in Webflow projects.
Design system
Colour, spacing and typography are all Variables. Change them once on the Style Guide page and the whole template follows. Avoid hard-coded values — they will not follow your edits.
Reduced motion
Every animation checks the visitor's system setting for reduced motion. If it is on, scroll effects, autoplay and the carousel stay still. You do not need to configure anything.
Parallax animation
Add data-parallax to any element and it will drift as the page scrolls. Everything else is optional — the defaults produce a gentle upward drift that suits most images and text blocks.
Example: an image that slides in from the left, twice as far as the default.
<div
data-parallax
data-parallax-direction="left"
data-parallax-strength="1.3"
></div>data-parallax-direction
up, down, left, right or scale. Default: up.
data-parallax-strength
Any number. Higher means more movement. Default: 0.65. With direction set to scale, this is also how far the element grows.
data-parallax-start
When the movement begins. Accepts ScrollTrigger keywords like "top center" or a plain number for a pixel offset. Default: top bottom.
data-parallax-end
When it finishes. Same format as start. Default: bottom top.
data-parallax-scrub
true ties the movement directly to the scrollbar. A number adds that many seconds of smoothing behind it. Default: true.
To remove
Delete data-parallax from the element. The element keeps every class and style it had.
Pinned sections
Add data-pin to hold an element still while the page keeps scrolling past it. The attribute's value decides what drives the pin: leave it empty to pin the element against its own height, use body to pin it across the whole page, or give it a selector such as .hero to pin it while that element scrolls.
Example: the contents list on the Licenses page, pinned against its layout and switched off on smaller screens.
<div
data-pin=".licenses-layout"
data-pin-disable-tablet
></div>data-pin-start
When the pin engages. Keywords or a pixel number. Default: top top.
data-pin-end
When it releases. Default: bottom bottom.
data-pin-spacing
Off by default, which is what lets the next section scroll up over the pinned one. Set it to "true" to reserve the pinned element's height instead, so nothing overlaps.
data-pin-anticipate
A number that reduces flicker when someone scrolls very fast. Try 1 if you see a jump. Default: 0.
data-pin-disable-tablet
No value needed. Turns the pin off at 991px and below. Use this whenever the layout around the pinned element stacks into one column.
data-pin-disable-mobile
The same, at 767px and below. If both are present, the tablet setting wins. Writing "false" as the value makes the template ignore the attribute.
To remove
Delete data-pin. The element returns to normal flow and any space the pin was holding is released automatically.
Overlapping sections
Add data-backward to a section and the section that follows will scroll up over the top of it, while this one drifts back and dims. It is the effect used between the large editorial blocks on the homepages.
The value decides when it starts: "top" begins as soon as the section's top reaches the top of the screen, "bottom" waits until the whole section is on screen.
The dimming layer
Optional. Place an element with the class Backward Section Overlay inside the section and it fades in as the section recedes. Leave it out and the section simply drifts back.
To remove
Delete data-backward from the section. The overlay, if you kept one, stays put but stops animating — hide or delete it as well.
Smooth scroll
Zeyna uses Lenis to replace the browser's stepped mouse-wheel scrolling with a smooth, eased glide, and keeps every scroll animation in sync with it. It is loaded globally, not per page.
You will find the library and its setup block in Site Settings → Custom Code → Footer Code. The setup block has a CONFIG section at the top: duration controls how long the glide lasts, smoothWheel and smoothTouch turn it on for mouse and touch, and anchorLinks decides whether in-page links glide or jump.
Smooth scroll is deliberately left off for visitors who ask for reduced motion, and off on touch devices, where native scrolling feels better.
<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js"></script>
<script>
(function () {
/* === CONFIG — edit these to taste ========================= */
var CONFIG = {
duration: 1.1, // how long the glide lasts, in seconds
smoothWheel: true, // smooth the mouse wheel and trackpad
smoothTouch: false, // leave phones on native scrolling
anchorLinks: true, // glide to in-page sections instead of jumping
};
/* ========================================================= */
if (typeof Lenis === 'undefined') return;
// Visitors who ask for reduced motion keep native scrolling.
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
var lenis = new Lenis({
duration: CONFIG.duration,
easing: function (t) {
return Math.min(1, 1.001 - Math.pow(2, -10 * t));
},
smoothWheel: CONFIG.smoothWheel,
smoothTouch: CONFIG.smoothTouch,
});
// Pause it from your own code with window.lenis.stop() / .start()
window.lenis = lenis;
if (window.gsap && window.ScrollTrigger) {
// Keep ScrollTrigger in step, or pinned sections drift out of place.
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add(function (time) {
lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);
} else {
requestAnimationFrame(function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
});
}
})();
</script>A panel scrolls oddly
Add the data-lenis-prevent attribute to any element that has its own scrollbar — a code block, a sidebar, a modal — and smooth scroll will leave it alone.
Pausing it from your own code
The instance is available as window.lenis, so window.lenis.stop() and window.lenis.start() will pause and resume it — useful while a modal is open.
To remove
Delete the setup block and the lenis.min.js script tag above it from the footer custom code. The site returns to native scrolling and every animation keeps working — nothing else depends on it.
Works grid
The Works page filters projects by category and lets visitors switch between column counts, both animated. The filter buttons are driven by the Portfolio Categories collection, so adding a category in the CMS makes a new filter appear on its own — there is nothing to wire up.
The counts next to each filter are calculated from the grid at page load, so they can never disagree with what is actually on the page.
<!-- filter button -->
<div class="works-grid-filter">
<div class="filter-text" data-category="Branding">Branding</div>
<div class="filter-count"></div>
</div>
<!-- column switch -->
<div class="grid-switch-item" data-grid-switch="3">3</div>
<!-- project card, can list several categories -->
<div class="works-grid-project" data-category="Branding, Web Design"></div>data-category
Goes on both the filter button and each project card. A card can belong to several categories — separate them with commas. Use "all" on the button that clears the filter.
data-grid-switch
Goes on each column-switch button. The value is the number of columns that button produces, for example 3. Column switching applies on desktop only; below 768px the grid follows your responsive settings.
Styling the active state
The selected filter and switch get the class is-active. Style that combo class in the Designer to change how the current selection looks.
Reusing it elsewhere
The system looks for a wrapper with the class Works Section. Copy that structure to another page and the filtering comes with it.
Sliders
Two moving pieces are built with GSAP rather than Webflow's slider component: the testimonial slider and the draggable project carousel on Homepage C. Both are tuned from a short settings block at the top of their function inside the GSAP component.
Testimonials — autoplay
Set autoplay to false to require the arrows. delay is how many seconds each quote stays on screen, speed is the length of the transition, stagger is the gap between each line of text.
Testimonials — what is optional
The arrows, the counter and the avatar card can all be deleted; the slider only wires up what it finds. It needs at least two quotes to run. One slider per page.
Carousel — speed
SPEED is how many pixels the track moves per frame; lower is slower. PARALLAX is how far each image shifts inside its frame — keep it under about a tenth of the slide width or the movement starts to look detached.
Carousel — content
The loop duplicates your slides once so it can run seamlessly. Add or remove projects in the CMS and the loop re-measures itself — you never edit the duplicates by hand.
To remove either one
Delete the section from the page. The script finds nothing to attach to and stops silently — there is no error and no need to touch the code.
Removing effects
Every system here is independent. Removing one never breaks another, and none of them are load-bearing for the layout — the site reads correctly with all motion switched off.
One element
Delete its data-parallax, data-pin or data-backward attribute. Classes and styling are untouched.
All scroll motion
Delete the GSAP component from the pages you want static, or empty the Embed inside it to strip motion from the whole site at once.
Smooth scroll only
Remove the setup block and the lenis.min.js tag from the footer custom code. Everything else keeps working.
Before you run Clean Up Styles
The scripts add the class is-active at runtime and look up around twenty classes by name — works-grid, grid-switch-item, quote-testimonials-slider, slider-next, slider-prev, home-c-portfolio, avatar-card and backward-section-overlay among them. Webflow sees these as unused. Deleting them stops the animations silently, so check the cleanup list against these names first.
If something is not behaving the way this page describes, the fastest check is the browser console — the scripts fail quietly rather than throwing errors, so a missing class or a typo in an attribute usually shows up as an effect that simply does not run. Confirm the attribute spelling first, then that the element still carries the class the script looks for.