Feel free to edit and change your font to anything you would like in the Text Style tab. This will not impact your number counter.

Congrats! Your automatic number counter should be setup. 🎉

<span class="count">65</span>

In your current design you want to add your counter to, go to the PAGE you would like to add your new canvas. Click the page title in the left sidebar and from the ••• settings menu click Add From Library. Go to My Library and locate the Animated Counter Canvas Add On by Northfolk, select the Stat Counter canvas, Apply My Fonts and Colors and ADD.

Transition Marquee

Instructions for your new

Preview instructions on Desktop :)

1

2

3

Since our numbers are already setup on the page, you'll just select your text element and hold down the ⌥ OPT key (or start from PC) and double click the text box. This will bring up your EDIT HTML popup so you can type in as long of a string as you would like. This opens the HTML editor (3). You can then change the number to your desired number.

For every page that is going to use the automatic number counter, you need to have a string of code in the Page Loaded Javascript code panel. This is already pre-loaded for you on the Animated Counter, but if you try to add this to any other page, you will need to copy that code over to the new page. 

To access this area, you will need to (1) Select the page name in the Page tab and then (2) navigate to the Advanced Settings and open the Page Loaded Javascript code panel. 

// Function to animate the counter
function animateCounter(element) {
    $(element).prop('Counter', 0).animate({
        Counter: $(element).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(element).text(Math.ceil(now));
        }
    });
}

// Create a new IntersectionObserver instance
let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // When the counter is visible, start the animation
            animateCounter(entry.target);
            // Optionally, stop observing the element after animation starts
            observer.unobserve(entry.target);
        }
    });
});

// Observe all elements with the 'count' class
$('.count').each(function() {
    observer.observe(this);
});