Instructions

Fictional firm details

Ordway is a fictional firm. Its regulator references, company number, addresses, phone numbers, memberships, deal sizes and results are made up. Replace each one with your own in the pages, the Footer and Call To Action components, and the CMS. The London numbers use the UK range reserved for drama, so they never connect to a real line.

• Partner pages link to the FCA register and the DFSA public register. Point them at your own entries.
• Check every regulatory line with your compliance lead before launch.

Recipients

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

1 Normal, Success and Error states. 2 Field names as they arrive in your inbox. 3 Where submissions are sent. 4 The form on the canvas.

Preloader

Step 0 of the GSAP / Global / Reveals block, on Home only. On load the panel is drawn as a ledger: the column rules draw down, the base rule draws across, the ORDWAY letters rise and the count runs to 100. Then the panel opens column by column along the same rules into the hero. It rests off screen, so the Designer stays clear, and it stays hidden for visitors who reduce motion. To switch it off, delete the preloader block on Home; the code then finds nothing and skips it.

Side menu

Global / Menu open and Global / Menu close. The drawer slides in from the right and the page behind it blurs.

Reveals

One block in Site settings, Custom code, Footer code, starting with the comment GSAP / Global / Reveals. The hero always reveals first: titles and leads rise line by line out of a hidden mask, the ORDWAY wordmark rises while its rule draws in, and the grid lines draw down. Then the rest of the page follows as it arrives: ledger lines draw from left to right with their rows, photos wipe up and settle, cards rise in, and the Services deck opens with its first service. Any other text in the page content, such as notes, sources and footer links, fades up as it arrives, so nothing sits still while the rest moves. Each plays once, and nothing moves for visitors who reduce motion. The class lists in the block (TITLES, LEADS, MARKS, FRAMES) set what moves, and TIME sets how long each reveal takes (see Key settings in 4.4). To remove it, delete the block from its comment to its closing script tag, and everything shows in place.

Hover states

Buttons, links and rows use Style panel hover states, not Interactions. Underlined links draw their line with a background on the link class, so on hover it sweeps out and back in. Partner and case photos ease closer, and link arrows nudge right, from one short block in Site settings, Custom code, Footer code, starting with the comment GSAP / Global / Hovers. Hover out always eases them back. Edit the SETS list to change what moves.

Services deck

One short block in the Services page settings, Custom code, Before body tag, starting with the comment GSAP / Services / Deck. It switches the five services from the tabs and arrows, moves on every 7 seconds and stops on Pause. Keyboard users tab along the service tabs, each one shows its service as it takes focus, and keyboard focus in the deck stops the autoplay. On each change the old lines drop down out of view and the new ones rise into place; OUT and IN at the top set how long that takes.

• To change the timing, edit the settings at the top of the block.
• To remove it, delete the block from its comment to its closing script tag. The deck then shows the first service.

1 Custom code in the Services page settings. 2 The Before body tag block. 3 DELAY sets how many seconds each service shows.

How we work steps

One short block in the Home page settings, Custom code, Before body tag, starting with the comment GSAP / Home / How we work steps. The steps follow the scroll: the step crossing the middle of the screen lights up, its bar fills as the visitor scrolls through it, and its photo wipes up over the last one. Nothing runs on a timer, so there is nothing to pause. LINE at the top sets where on the screen a step lights up, and WIPE how long the photo change takes.

• To change the timing, edit the settings at the top of the block.
• To change a photo, select it inside the image frame on Home. Photos follow the order of the steps.
• To remove it, delete the block from its comment to its closing script tag. The first step and its photo then show on their own.

Article contents

One short block in the Insight template settings, Custom code, Before body tag, starting with the comment GSAP / Insight / Contents. The On this page rows above Written by are native section links: The short answer, The full answer, Sources and Read next. As the visitor scrolls, the row for the part being read turns ink. The list hides from tablet down, where the sidebar sits below the article.

• To change the list, edit it on the Insight template: duplicate a row, change its number and label, and point its link at another section that has an ID in its element settings.
• To restyle the rows, select a row inside On this page on the Insight template. All four share the article_toc-link class, and the combo class is-active marks the row being read.
• To remove it, delete the On this page block in the sidebar, then the block from its comment to its closing script tag.

Element map

Every class the GSAP blocks animate, what it does and which block runs it. Visitors who prefer reduced motion see every element in place with no movement.

• .preloader on Home: the rules draw down, the count runs to 100, then the panel opens column by column. Reveals, step 0.
• .home-hero_heading, .page-head_heading, .service-hero_heading, .article-head_heading, .section-head_heading, .contact_heading, .feature_heading, .subscribe_heading, .office_name, .deck_title: titles rise line by line out of a mask. Reveals, step 1.
• .home-hero_lead, .page-head_lead, .service-hero_lead, .case-quote_text: leads and quotes rise line by line. Reveals, step 1.
• .home-hero_wordmark, .footer_wordmark: the ORDWAY wordmark rises while its rule draws in. Reveals, step 1.
• .ledger-grid, .footer_legal, .steps_list: each row draws in from left to right behind its line. Reveals, step 2.
• .text-label, .text-note, .breadcrumb inside section heads: fade up as their row draws. Reveals, step 3.
• .person-card_image-wrap, .case-card_image-wrap, .page-image_wrap, .feature_image-wrap, .partner-head_image-wrap, .office_media, .approach_image-wrap: photos wipe up and settle from a slight zoom. Reveals, step 4.
• .who-card, .person-card, .case-card, .question-card and the blocks inside .article_body: rise in as a group. Reveals, step 5.
• .grid-lines_inner: the column lines draw down. Reveals, step 6. Anything else inside .container-large fades up in step 7.
• .button_icon, .text-link_icon, .person-card_image, .case-card_image, .feature_image: arrows nudge right and photos ease closer on hover. Hovers block.
• .deck_slide and its tabs on Services, .steps_list on Home, .article_toc-link on the Insight template: the three page blocks described above.

Key settings

Open Site settings, Custom code, Footer code. Near the top of the GSAP / Global / Reveals block are two settings. START sets when an element reveals: top 88% means when its top reaches 88% of the way down the screen, and top 75% reveals later. TIME sets how many seconds each kind of reveal takes: title, lead, wordmark, line, label, photo, card and grid. Change a number, save and publish.

// GSAP / Global / Reveals
var START = 'top 88%'; // how far up the screen an element is when it reveals
var HERO_AT = 0.15; // when the hero starts, in seconds
g.to(batch, { clipPath: SHOW, duration: 1.1, ease: 'power3.inOut', stagger: 0.08 });

Keep every TIME value at 0.8 or below, the range Webflow recommends; a lower number feels quicker. Next to each title and lead, stagger sets the gap between lines, and a smaller number brings them in closer together.

// GSAP / Global / Reveals, step 1
var v = { yPercent: 0, duration: mark ? 1.4 : (title ? 1.1 : 0.9), ease: 'expo.out', stagger: title ? 0.09 : 0.06 };

Hover strength and speed sit in the GSAP / Global / Hovers block, in the list under Cards. Each line has to (raise 1.05 to 1.1 for a stronger zoom) and duration (seconds, lower is quicker).

// GSAP / Global / Hovers
{ card: '.person-card', part: '.person-card_image', prop: 'scale', to: 1.05, duration: 0.6 }

Page blocks. DELAY is how long each service stays on screen, and LINE is where on the screen a step lights up as the visitor scrolls. OUT, IN and WIPE set how long each change takes; keep them at 0.8 or below.

// GSAP / Services / Deck
var DELAY = 7;
var OUT = 0.45, IN = 0.7;

// GSAP / Home / How we work steps
var WIPE = 0.8;
var LINE = 'top 55%', END = 'bottom 55%';

Remove an animation

• Open Site settings, Custom code, Footer code for Hovers and Reveals, or the page settings of Services, Home or the Insight template for the page blocks.
• Select the block from its comment line, such as GSAP / Global / Reveals, down to its closing script tag, and delete it. The plugins are switched on in Site settings, GSAP integration: SplitText is used only by Reveals, Text by Reveals and the Services deck, and ScrollTrigger by Reveals, the How we work steps and the article contents. Untick a plugin only when no remaining block uses it.
• There is no separate ScrollTrigger to clean up: each block creates its own triggers, so they go with the block. Save and publish.
• What changes: without Reveals every element shows in place on load and the Home preloader stays hidden above the screen. Without Hovers, Style panel hover colours still work but photos no longer zoom. Without a page block, the first service, the first step or a plain sidebar shows on its own.