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-triggered animation in Webflow, and trigger it only when the section is in view, follow these key steps.

1. Prepare Number Elements in Webflow

• Create text elements for each number you want to animate, usually with a starting value of 0.
• Assign each number element a unique class or ID, such as counter-number, to target with JavaScript.

2. Enable Scroll Animation Trigger

• Select the parent section or wrapper containing the counters.
• Go to the Interactions panel in Webflow.
• Add a Page Trigger > While Scrolling In View or Element Trigger > Scroll Into View.
• Inside the trigger settings, select "Scroll into view" and choose "When scrolled into view".

3. Add a Custom Embed for the Counter Script

• Add an Embed element inside a page or in the Footer custom code area.

• Use the following approach (simplified here for explanation):

• In the script, define:

  • A function that uses requestAnimationFrame to count up.
  • A flag to prevent re-running the animation.
  • A scroll or IntersectionObserver check to trigger when visible.

• Example outline:

• Use IntersectionObserver to detect when the number comes into view.

• When triggered, animate the number from 0 to the target value (use dataset attributes to store target numbers if needed).

• Set a flag like data-done="true" after the first animation to avoid repeats.

4. Sample Inline JavaScript Structure

Here’s a simplified explanation (no raw JS blocks; write this inside an Embed component):

• Select all .counter-number elements.
• Use IntersectionObserver to detect when elements are visible.
• On first view:
• Animate from 0 to the target value.
• Use an increment function inside requestAnimationFrame.
• Set a flag (e.g., data-animated="true") so the animation doesn’t repeat.

5. Load Script When Needed

• Place your script either:
• In an Embed element inside the section (works well for single pages), or
• In the Before Custom Code section (under Project Settings > Custom Code).

Summary

To animate numbers on scroll in Webflow: wrap number elements with an interaction trigger, detect scroll using IntersectionObserver, and run the JS count-up only once when the element is in view. This ensures smooth integration between Webflow's scroll animations and your custom animated counters.