Instructions

Everything you need to know to make this template your own. Most of it is editable in the Designer without touching code.

Getting started

What is included

Three homepage layouts, three Work layouts, three Blog layouts and three Contact layouts, plus About, FAQ and CMS-driven detail pages for Projects, Services and Blog Posts. Delete any variants you do not need.

Before you publish

Replace the logo in the Navbar and Footer components, update the favicon and webclip in Project Settings, swap the CMS content in Projects, Services and Blog Posts, and update the social links in the Footer.

Design system

Variables

Colours, type sizes, line heights, spacing and radii are all controlled by Variables rather than by classes. Change a variable once and it updates everywhere. To change the accent colour across the whole template, edit Colors / Primary and Colors / Primary Hover.

Responsive modes

Variables use modes for responsive values, with separate values for Desktop, Tablet, Mobile Landscape and Mobile Portrait. Modes apply automatically at the matching breakpoints. To change a heading size on mobile, switch mode in the Variables panel rather than overriding the style at the breakpoint.

Spacing scale

Spacing is a 4 pixel based scale from Space 2XS (4) up to Space 5XL (200), including Small 12, Medium 20, Large 40, XL 60 and 2XL 80 on desktop. The larger steps shrink automatically on Tablet and Mobile. Use these Variables rather than typing values so spacing stays consistent across breakpoints.

Animations

Counter animation

Counts a number up from zero when it scrolls into view, once per page load. The Statistic Item component already does this: it reads the number and any suffix, such as 100+ or 05, straight from its text, so just edit the text. To turn any other text element into a counter, select it in the Designer, open Element Settings, and add the attribute data-counter-animation set to true. The optional attributes below override the values read from the text.

data-counter-animation

Required. Set to true. Without this the element is ignored.

data-count

Required. The number to count up to, for example 100. Defaults to 0.

data-suffix

Optional. Text appended after the number, such as a plus or percent sign.

data-duration

Optional. How long the count takes, in seconds. Defaults to 3. Between 1 and 3 usually feels best.

data-jump

Optional. Counts in steps of this size rather than by one. Set 5 to count 0, 5, 10. Defaults to 1.

A counter reaching 100+ over two seconds:

data-counter-animation = "true" data-count = "100" data-suffix = "+" data-duration = "2"

The text you type into the element is replaced the moment the animation starts, so set it to the final value. That way it still reads correctly if a visitor has JavaScript disabled.

Changing how the counter moves

The script lives in Project Settings, under Custom Code, in the Footer Code field. Two values there control the feel of every counter at once.

ease: 'power2.out' once: true

Change power2.out to none for a steady count with no easing, or power4.out for a sharper slowdown near the end. Set once to false if you want the animation to replay every time the element scrolls back into view.

Removing the counter

Delete the script from Project Settings, Custom Code, Footer Code, then republish. The numbers display as static text, so nothing breaks and no layout shifts. You can leave the data attributes in place; without the script they do nothing.

Scroll and load animations

The homepage hero sequences, heading line reveals, fading cards and staggered lists are native Webflow Interactions powered by GSAP. Open the Interactions panel and look for names that start with Home V1, Home V2 or Home V3 (for example Home V1 Hero On Load). Each one targets an existing class, so you can change timing, easing or distance in the panel without touching the layout.

To add the same reveal to a new section, duplicate an interaction, then point its trigger at your section class. Every interaction respects the visitor's reduced motion setting. All motion in this template, including the navbar and dropdown, is built with Webflow's current Interactions; there are no legacy interactions to maintain.