Atlas Builder - Webflow Ecommerce Website Template

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. Smooth Scroll (Lenis)

This template uses Lenis smooth scrolling with GSAP ScrollTrigger for a smoother page scrolling experience. No setup is required — it works automatically after publishing.

This template uses Lenis smooth scrolling with GSAP ScrollTrigger.
It works automatically after publishing. No setup required.
To change scroll speed, go to Project Settings → Custom Code → Before </body>.
Find lerp: 0.08 and adjust the value (lower = smoother, higher = faster).
To disable smooth scroll, remove the Lenis script from the Before </body> custom code.
GSAP is only used for scrolling behavior. No GSAP knowledge is required to edit the template.

<script>
  window.addEventListener("load", function () {
    const counters = document.querySelectorAll("[data-count]");

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;

        const el = entry.target;

        // Remove the thousand separator dots, then convert to a number.
        const target = parseInt(el.getAttribute("data-count").replace(/\./g, ""), 10);

        const duration = 3000; // in ms
        const frameRate = 60;
        const totalFrames = Math.round(duration / (1000 / frameRate));
        let frame = 0;

        const count = () => {
          frame++;
          const progress = frame / totalFrames;
          const current = Math.round(target * progress);

          // Format the number with thousand separators
          el.innerText = current.toLocaleString("id-ID");

          if (frame < totalFrames) {
            requestAnimationFrame(count);
          } else {
            el.innerText = target.toLocaleString("id-ID");
          }
        };

        requestAnimationFrame(count);
        observer.unobserve(el);
      });
    }, { threshold: 0.6 });

    counters.forEach(el => observer.observe(el));
  });
</script>

6. Still Confused?