Template docs · v1.0
Everything you need to rebrand this template — colors, fonts, CMS collections, the GSAP animation map, and the full replace-this-text checklist.
01
— Getting started
Clone the template into your Webflow account, open the Style panel, and set the site title. Everything downstream reads from the variables and CMS you’ll edit in the next sections — work top to bottom and you won’t miss a spot.
02
— Colors & Fonts (Variables)
All color and type live as Webflow Variables. Swap the cobalt accent, porcelain base, and ink once and the whole site follows. Fonts are League Spartan (display), Work Sans (body), and Geist Mono (labels) — replace the variable font links to rebrand type globally.
03
— How to Edit GSAP Animations
Every animation lives in its own small script under Site Settings → Custom Code (and two page-level scripts noted below). Each script targets elements by class name — the Element Map below lists every class each effect touches. To restyle, retime, or remove an effect, edit or delete its script; the classes themselves are just normal Webflow classes and never need to be renamed. All effects respect prefers-reduced-motion automatically.
Scroll reveal
Fades in service, review, blog, FAQ, process, stat, quote, and financing cards as they enter the viewport, plus the Home hero intro (ManifoldMotionReveal.js). Edit: add or remove a class from the script's selector list to include or exclude elements — duration and stagger live in the same block. Remove: delete the script; every element stays fully visible since the effect uses gsap.from().
Count-up numbers
Animates .stat-number-dominant and .stat-number-companion inside .stat-bar-wrap from zero to their final value on scroll (ManifoldMotionCounters.js). Edit: the numbers are plain text in Webflow — just edit them; +, ★, and min suffixes and commas are preserved automatically. Remove: delete the script; the final numbers show immediately with no count-up.
Logo / trust marquee
Scrolls the children of .marquee-track in an infinite loop (ManifoldMotionMarquee.js). Edit: speed is the duration value in the script; content is normal Webflow elements inside the track. Remove: delete the script; the row displays as a static, non-scrolling line.
Filter chips (Projects)
data-filter-group + data-filter drive the Projects category chips (ManifoldFilterChips.js); each Project card carries a hidden span bound to the Service field for matching. Remove: delete data-filter-group from the chip row — all project cards stay visible with no filtering.
TOC scroll spy (Legal pages)
data-toc + data-toc-active highlight the current section in the Privacy/Terms sidebar contents card while scrolling (ManifoldTocSpy.js, GSAP ScrollTrigger). Remove: delete data-toc from the sidebar card — links still jump, just without the auto-highlight.
Hero background crossfade (Home)
Powered by the herobgcrossfade page script on Home. Three hero-slide images fade in a loop — adjust the hold (5.5s) and fade (1.2s) values in the script, or delete the script and the hero-bg div to remove it. The fixed curtain-scroll effect is pure CSS (hero-bg position:fixed) and needs no script.
Before / after card drag (Projects)
The manifoldprojectcarddrag page script makes every project card's before/after handle draggable. It uses GSAP Draggable, already loaded site-wide. To remove, delete the page script on the Projects page — cards fall back to a static 50/50 split. The same GSAP Draggable plugin also powers the .ba-image-wrap / .ba-bg-before / .ba-handle / .ba-divider before/after slider on Home and the .detail-ba-* slider on Project detail pages, via the ManifoldMotionDraggable script — remove that script and those handles rest at 50/50 too.
Load more (Blog / Projects)
The data-cms-loadmore wrapper (its number = items shown per click) plus data-cms-loadmore-grid / data-cms-loadmore-btn / data-cms-loadmore-note drive incremental loading on Blog and Projects (ManifoldCmsLoadmore.js). Edit: change the data-cms-loadmore attribute value to show more or fewer items per click — the note updates to “Showing X of Y” automatically. Remove: delete the script AND the button/note elements; all CMS items render at once (Webflow's own collection list limit still applies if set).
Nav on scroll
Adds a background blur and border to .navbar after the page scrolls past the hero, and a solid style on inner pages (ManifoldMotionNav.js). Remove: delete the script; the navbar keeps its designed static style at every scroll position.
Mobile menu
Opens and closes the mobile nav via .nav-hamburger, .mobile-menu-overlay, .menu-close-btn, and .menu-nav-item (ManifoldMotionMenu.js). Remove: only delete this script if you provide another way to open the menu first — it powers the open/close interaction itself, not just its animation.
Blog card hover zoom
Zooms .blog-card-media and .blog-featured-media on hover over their parent a.blog-card / a.blog-featured-card links (ManifoldBlogHover.js). Remove: delete the script; cards keep their existing CSS hover states with no zoom.
Nav current-page highlight
Adds Webflow's w--current class to the matching a.nav-link on section pages, such as Service, Project, and Service Area detail pages (ManifoldNavActive.js). Remove: delete the script; Webflow still highlights exact-match nav links natively, just not on section/detail pages.
Phone icon ring on hover
Rings the svg icon inside any a[href^="tel:"] link on hover with a short GSAP timeline (ManifoldPhone.js v2.0.0). Remove: delete the script; phone links keep their normal hover color change with no icon animation.
Hero wave
Script: Manifold Motion — Wave. Targets the layered wave paths in the hero SVG. Per-layer speeds live in the script's config array. Remove: delete the script; the wave displays as static art.
FAQ smooth open / close
Script: ManifoldFaqSmooth (page-level on pages with FAQs). Targets every details/summary FAQ item; animates the answer's height and fade. Tweak the two duration values in the script. Remove: delete the script; FAQs fall back to the browser's native instant toggle.
04
— CMS collections
Services, Projects, Service Areas, Reviews, and Blog Posts are all CMS-driven. Edit collection items, not static sections — the Services list, bento grid, and detail templates all bind to the same fields, so one edit updates every page.
All photography (hero, crew, before/after, services, blog) is AI-generated placeholder imagery — replace with your own real job photos before publishing, especially if you keep the “no stock photos” copy on Home and Projects.
05
— Replacement map
Before launch, swap all placeholder brand data. Use this map as your checklist — search each demo string and replace site-wide so no “Manifold” or Austin reference ships to your client.
06
— Forms
Connect each form to your Webflow form handler or an integration (Zapier, Make, or a native email action). Set the success and error states in the form settings — the styled notices are already in place on the Contact and hero forms.
07
— Support
Setup questions get a same-business-day answer. Include your read-only share link and the page in question so we can point you straight to the fix.
08
— Support
Email the template team or call — we answer setup questions within one business day.