Counting numbers with separator (thousands)

[droolcup]

Hey there,

 

I am animating several figures on a website. Now I have to add points as separators for thousands ("25.000" instead of "25000" and so on).

 

Sadly, since my JS knowledge is that of an absolute beginner, I didn't manage to reverse engineer the solutions presented in this topic: 

 

 

 

I am also using jQuery btw.

 

Any help to make this compatible with my code is very much appreciated!

 

Thanks in advance.

 

See the Pen zYGjPaM by droolcup (@droolcup) on CodePen

[ZachSaucier]

Hey droolcup and welcome to the GreenSock forums!

 

You can implement the approach outlined by Jonathan in GSAP 3 like so:

See the Pen YzXLYJx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice that I used innerText instead of innerHTML because it performs better.

 

Let me know if you have any questions!

[droolcup]

Thank you very much, Zach! I just told the function to return "." and not "," and now it's working like expected/a charm.

[AaronP]

Hi fellow greensockers, 

 

I'm trying to achieve this animation on my homepage. But can't workout how to have it activate(trigger) on scroll.

I'm using the codepen example above and changed by selectors, when i refresh it works. But not on scroll of that section of the page?

 

[ZachSaucier]

Hey @AaronP and welcome to the GreenSock forums! 

 

For now, in order to get an animation to fire on scroll, you need to use either the intersection observer API or keep track of the scroll location. For how to use the intersection observer API, one of our moderators wrote this helpful post.

 

GreenSock is actually working on a new scroll-based plugin that will make this effect even easier to implement!