Instructions

• 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”).

• 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.

• 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).

• 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.

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

• 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.

• 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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>

<script>
document.addEventListener("DOMContentLoaded", () => {
  if (typeof gsap === "undefined") return;

  gsap.registerPlugin(ScrollTrigger);

  const counters = document.querySelectorAll("[data-count]");

  counters.forEach((el) => {
    const rawValue = el.getAttribute("data-count");
    if (!rawValue) return;

    const target = parseInt(rawValue.replace(/\./g, ""), 10);
    if (isNaN(target)) return;

    let obj = { value: 0 };

    gsap.to(obj, {
      value: target,
      duration: 2.5,
      ease: "power2.out",
      onUpdate: () => {
        el.textContent = Math.round(obj.value).toLocaleString("id-ID");
      },
      scrollTrigger: {
        trigger: el,
        start: "top 85%",
        toggleActions: "play none none none"
      }
    });
  });
});
</script>

• 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”).

• card-container → Parent wrapper
• card → Each individual card

• Project Settings → Custom Code → Before </body>
• Paste the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

• 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.

<script>
window.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector(".card-container");
  const cards = gsap.utils.toArray(".card");

  // Run only on desktop devices with hover support
  const isDesktop = window.matchMedia("(min-width: 1024px) and (hover: hover)").matches;
  if (!isDesktop) return;

  const originalPositions = cards.map(() => ({
    x: (Math.random() - 0.5) * 20,
    y: (Math.random() - 0.5) * 20,
    rotation: (Math.random() - 0.5) * 10,
    scale: 1
  }));

  cards.forEach((card, i) => {
    gsap.set(card, {
      ...originalPositions[i],
      force3D: true
    });
  });

  cards.forEach((card, index) => {

    card.addEventListener("mouseenter", () => {
      gsap.to(card, {
        scale: 1.1,
        x: 0,
        y: 0,
        rotation: 0,
        duration: 0.4,
        ease: "power3.out",
        overwrite: "auto"
      });

      cards.forEach((otherCard, i) => {
        if (i !== index) {
          const direction = i < index ? -1 : 1;

          gsap.to(otherCard, {
            x: direction * container.offsetWidth * 0.15,
            rotation: direction * 10,
            scale: 0.95,
            duration: 0.4,
            ease: "power3.out",
            overwrite: "auto"
          });
        }
      });
    });

    card.addEventListener("mouseleave", () => {
      cards.forEach((c, i) => {
        gsap.to(c, {
          x: originalPositions[i].x,
          y: originalPositions[i].y,
          rotation: originalPositions[i].rotation,
          scale: 1,
          duration: 0.6,
          ease: "power3.out",
          overwrite: "auto"
        });
      });
    });

  });
});
</script>