1. Webflow

If you're new to Webflow, take a look at this Webflow 101 Crash Course to understand the basics and essentials.

2. Customization

To make color, fonts and style modifications easier and quicker, this Template utilizes Webflow variables feature.

3. Style Guide

This template utilizes components and variables feature in Webflow - this means the style and feel of this template can be changed easily, with just a few clicks.

4. SVG

Icons in this template are custom made, SVG code embedded elements. If you want to change their size, select one of them and simply change the Height Width Icons in this template are custom made, SVG code embedded elements.

5. How to Adjust the Counter in Your Webflow Template

A. Where to Find It

This counter script runs on any element with a data-count attribute.
You’ll usually see this attribute in the Webflow Designer on the counter elements (like “Projects Completed” or “Happy Clients”).

B. How to Change the Numbers

Simply change the number in the data-count attribute in Webflow Designer.
The animation will automatically update to count up to the new number.You don’t need to edit the code.

C. How to Change the Animation Speed

In the script, look for: const duration = 3000; // in ms
This means the animation takes 3000ms (3 seconds) to complete.
Change 3000 to another value (like 5000 for 5 seconds).

D. How to Change When It Starts Animating

The animation starts when 60% of the counter is visible on screen because of: { threshold: 0.6 }
Change 0.6 to 0.3 (30%) to make it start earlier or 0.8 (80%) to make it start later.

E. Thousand Separator Formatting

The code currently uses id-ID locale: el.innerText = current.toLocaleString("id-ID");
To use commas, replace "id-ID" with "en-US".

F. How to Add a New Counter

Add a Text Block in Webflow.
Set the Custom Attribute: Name: data-count, Value: Number you want (e.g., 7500)
The animation will work automatically.

G. Where to Put the Script

Place this <script> in Page Settings > Before </body> tag or in your Project Settings > Custom Code > Footer.
It runs globally, so all counters with data-count will work.

H. Javascript for Counter animation.

6. Still Confused?

If you still have any confusion or need clarification on anything, feel free to reach out to us directly. You can contact us via email at support@codexzel.com.We’re happy to help!

Get a Free Website Audit.

Let’s review your website together, uncover growth opportunities, and plan improvements—whether you work with me or not.

BOOK A CALL

EXPLORE SERVICES