How toedit.
Everything moves with GSAP code targeted by data-animate attributes. Here is the map of every effect, and how to change or remove it.
GSAP element map
Key variables
All key settings live in the ARBITER object at the top of the template script (src/scripts/custom/):
- ease / easeInOut — global easing (default expo).
- speed — base duration in seconds.
- preloader — true / false.
- preloaderDuration — counter duration.
- magneticStrength — 0 turns magnetic buttons off.
- cursor — true / false.
- marqueeSpeed — seconds per loop.
Remove effects
Remove one effect from one element
Find the element in its section component (src/components/sections/) and delete the data-animate attribute.
Remove an effect everywhere
In the template script (src/scripts/custom/), delete the call to that block inside init() (for example initMarquee()).
Remove all motion
Delete the template script imports at the end of each page. The layout does not depend on JavaScript; the page is fully readable without it. Visitors with “reduce motion” enabled get a static page automatically. GSAP and the ScrollTrigger, SplitText and ScrambleText plugins come from the gsap npm package (src/scripts/gsap-globals.ts). The template script contains only the template's animation code and loads nothing from outside.
IX3 interactions
As in the original design, click interactions use IX3:
- Menu open / close — Menu button click: menu_component display block, menu_panel clip reveal, menu links stagger, hamburger lines rotate to an X.
- FAQ — faq_question click: faq_answer height auto, faq_icon rotate 45°.
All hovers are GSAP (blocks G10, G12, G13, G20–G22, G24).
Components
Cursor, Navbar, Menu, Preloader and CTA Footer are Components. Edit them once and every page updates. The CTA Footer has three properties — label, heading and serif heading line — so each page can say something different.
CMS
Four collections power the site:
- Practice Areas — Practice Areas page list, /practice-area/ template, home horizontal track.
- Results — Results page ledger, /result/ template, home stacked cards (limit 3).
- Partners — Partners page grid, /partner/ template, home and about hover lists.
- Insights — Insights page (Featured switch filters the large card), /insight/ template, home grid (limit 3).
Hover image lists
Row 1 shows image 1, row 2 shows image 2, and so on. The preview images are a second list in the same section — keep them in the same order as the rows.
Stacked result cards
Each list item carries the results_item class (sticky) and data-animate="stack-card". The script sets each item’s sticky offset (6rem, 7rem, 8rem…), so every item uses the same class. Switch on Featured on Home for the cards you want there.
Ordering
Practice Areas and Partners have a Number field (01, 02…). Lists sort by it, and it is shown as the red serif numeral.
Home insights
The large first card and the two smaller cards are two lists in the same order: the second one starts at the second insight.
“Next” links
Practice Areas, Results and Partners each have a Next reference field pointing to the same collection. Bind the Next section’s link, title and image to it.
Keep reading
On insight pages, “Keep reading” shows three insights (the related field of each insight, or the first ones in order).
Rich text
Rich text fields use H3 for sub-headings. Every template page places an H2 label before the rich text to keep a correct heading order.
Inline SVG
Icons and the contact seal are inline SVG elements, so they stay sharp and inherit colour.
- Seal text — edit the words inside <textPath>. Keep textLength so the text wraps the circle exactly.
- Arrows — use vector-effect="non-scaling-stroke" so lines stay thin at any size.
- Colours use currentColor — change the parent’s text colour.