How can I combine the animated JS number counter with scroll animation on Webflow and ensure it only animates when the section is in view?

To combine a JavaScript number counter animation with a scroll animation in Webflow, you need to use Webflow interactions and custom JavaScript. The counter should only animate when the section comes into view. Follow these steps:

1. Add the Number Elements to Webflow

• Place a Text Block in your Webflow project where you want the number to appear.
• Give it a custom class (e.g., counter-number) so it can be targeted with JavaScript.
• Set the default value to 0.

2. Add the Webflow Scroll Interaction

• Go to Interactions and create a new Page Trigger → Scroll Into View.
• Apply this interaction to the section where the counter is located.
• Set an opacity change or other effects to create a smooth appearance of the section.

3. Add Custom JavaScript for the Counter Animation

• Go to Project Settings → Custom Code → Before tag, then add the script below:

<script>document.addEventListener("DOMContentLoaded", function() {  function startCounter(element, target, duration) {    let start = 0;    let increment = target / (duration / 16);     let interval = setInterval(function() {      start += increment;      if (start >= target) {        clearInterval(interval);        element.innerText = target;      } else {        element.innerText = Math.floor(start);      }    }, 16);  }  function handleIntersection(entries, observer) {    entries.forEach(entry => {      if (entry.isIntersecting) {        let counterElement = entry.target;        let targetNumber = parseInt(counterElement.getAttribute("data-target"));        startCounter(counterElement, targetNumber, 2000);        observer.unobserve(counterElement);      }    });  }  let observerOptions = { threshold: 0.5 };  let observer = new IntersectionObserver(handleIntersection, observerOptions);  document.querySelectorAll(".counter-number").forEach(counter => {    observer.observe(counter);  });});</script>

4. Set Target Numbers in Webflow

• For each .counter-number element, add a custom attribute:
• Name: data-target
• Value: The final number (e.g., 1000).

Summary

These steps ensure that the number counter animation only starts when the section comes into view. Webflow interactions handle scrolling effects, while JavaScript manages the number animation using the Intersection Observer API.