Number Count Trigger on Click

Attributes
1

Hey All
I have numbers within an accordion and want to trigger the Number Count script when that accordion opens.

I tried
window.fsAttributes.numbercount.init();

which is a solution that has worked for other attributes to programmatically trigger them but I get an error

> "Uncaught TypeError: window.fsAttributes.numbercount.init is not a function"

Is there another snippet that I need to trigger them?

Thanks

2

Hey @bill! Try adding this before the init line window.fsAttributes = window.fsAttributes || [];

If this does not fix the issue please share a link or your code so I can help debug :wink:

3

Hi @Support-Luis

I’m encountering a similar issue but the previous answers did not provide much context.

Here’s the script I worked on:

// Number count
window.fsAttributes = window.fsAttributes || ;
window.fsAttributes.push([
“numbercount”,
function (numberCountInstances) {
// Function to trigger the number count animation
const triggerNumberCountAnimation = () => {
const countElements = $(‘[fs-numbercount-element=“number”]’);
countElements.each(function () {
const event = new Event(“numbercount:start”);
this.dispatchEvent(event);
});
};

// Add event listener to the trigger elements with the specified class
const triggerClass = $(".count-up_tab-link");
$(triggerClass).on("click", function () {
  triggerNumberCountAnimation();
  console.log("count it up");
});

},
]);

It’s not working out and can’t find any info elsewhere, good you help me figure this out please?

4

Hey @joseph.bongrand! Could you please share your published link?

5

Hey @Support-Luis here’s a link: Home

6

Hey @joseph.bongrand! Is this an issue of you wanting to reinitiate the counting animation depending on the active tab?

As in, the user sees “Time saved” count → clicks on “Money saved” and sees the animation → clicks once more in “Time saved” and the animation plays again?

I am not sure if we can do this :thinking:

7

@Support-Luis yes that’s what I’d like to achieve.
Anyway it can be reset or re-triggered?
The only option I see atm is to delete the element and recreate it on every click but that’s a lot of DOM manipulation + not even sure that works

8

Yes, I also see this as the only possible option something like resetting the text element to the original value and then running the window.fsAttributes.numbercount.init(); line.

You are free to give it a try.

9

Got it I’ll give that a try

1 Like