When copying either CounterUp2 from the main page, or the most recent forum post I found that makes my code work: CounterUp JS cancelling the Tabs Hover JS - I'll pay :)
The code on my site:
The animation of the numbers works! HOWEVER, I am not sure how to make it so that the animation ONLY begins when users scroll down and reveal the numbers.
Do you guys have anything I can just copy and paste? Please be as specific as you can, because I am a total noob with JS and web flow in general. Thank you <3
Here is my site Read-Only:
https://preview.webflow.com/preview/arrestingmotion?utm_medium=preview_link&utm_source=dashboard&utm_content=arrestingmotion&preview=0d088acebef9c5a875fa6e31cf1cbeb9&workflow=preview
I found the solution! Posting here in case anyone else needs it!
I put this before the tag in whatever page has the counting up numbers.
The: ( ‘.section-numbers’ ) in
const el = document.querySelector( ‘.section-numbers’ )
can be changed to different sections in your page and it should be changed!
Also the 0 in { threshold: 0 } can be changed to different values between 0 and 1 and this will change when the animation starts to happen. 0 is as soon as your section is visible and 1 is as soon as the entire section is visible. With 1 the animation looked glitchy. Numbers were already to max count up value then glitched to 0 and counted up to whatever the were set to at max.
For some reason I can’t post the custom code? Let me try again