Instructions

Seven collections run the site

A People item in the CMS

1. The seven collections
2. Fields are grouped, with a hint under each field
3. Taking new clients: on shows the green badge
4. At a glance fills the Statement of practice ledger

Case studies on Home

1. One Case Studies item. Featured and Order control it.
2. Hero image
3. Name
4. Metric 3 value and label

Case study template

1. Name
2. Overview fields: Client, Sector, Location, Year, Length and Practice
3. Headline result

Deadline page

1. Name
2. Period, Send records by and Last checked
3. Due date, type, source and the other Deadlines fields

Prices for the UAE and the UK

• The region and billing switches need no code.
• Plan cards read Price UAE, Price yearly UAE, Price UK and Price yearly UK from Plans.
• In the compare table and extras, edit both the price_ae and price_uk text.
• Keep is-region-off, is-region-on, is-off and is-on when you run Clean up.
• To drop UK prices, delete the UK button and the price_uk elements.

A Plans item in the CMS

1. Card colour: the card background
2. Text colour: use a light one on a dark card
3. UK and yearly prices, typed as shown

Send the form to your inbox

• Set recipients in Site settings, Forms.
• Success and error states are styled. Edit their text from the form's state switcher.

How to Edit GSAP Animations

Motion runs on Webflow Interactions, which are built on GSAP. Each is named page first, then action, such as Pricing / Show yearly prices. Global means it runs on every page. Three small effects use GSAP in custom code, covered below.

1. Open the Interactions panel.
2. Pick an interaction by name.
3. Select an action to change its duration, delay or ease.
4. To skip it on one breakpoint, add a conditional playback rule.
5. To remove it, delete the interaction. The element shows in place.
6. Keep the reduced motion rule on anything you add.

Interactions panel in the Designer

1. Every interaction, by name
2. Trigger and actions of the selected one
3. Reduced motion rule: skip to end
4. Timeline: drag or select an action to change timing

Interactions by name

GSAP in custom code

Three blocks in Site settings, Custom code, Footer code. Each starts with a comment naming its page and action, such as GSAP / Global / Counters count up on scroll.

Key settings

// Vika counters: speed, easing and start point
g.to(o, { v: to, duration: 0.8, ease: 'power3.out',
  scrollTrigger: { trigger: el, start: 'top 85%', once: true } });

// Vika menu hover: speed, dim level and nudge
var d = still ? 0 : 0.4;
g.to(l, { opacity: active && !on ? 0.5 : 1, x: on && !still ? 14 : 0,
  duration: d, ease: 'power3.out', overwrite: 'auto' });

// Vika office clocks: second hand tick
g.to(k.s, { rotation: deg, duration: 0.35, ease: 'back.out(3)', overwrite: true });

Remove a block

1. Open Site settings, Custom code, Footer code.
2. Delete the block from its comment to its closing script tag.
3. Save and publish. Figures and times then show as typed.