Count Stack

Installation & Updates

Install the Count Stack by double-clicking on the downloaded stack file. Periodic updates are downloaded using the update facility in the Stacks Library.

Using Count

Drop the Count Stack onto your page in the desired location.

Set your start value, end value, and the duration of the counting animation. Work your way down the stack controls to customise as required.

Stack Settings

Count Stack Settings

Show All | Hide All

Basic Settings

Numbers : enter the start and end values. Counting will always animate to the end value.

Duration : set the duration, in milliseconds, for the count to reach the end end value.

Use Decimals : turn ON to enable decimals, or leave OFF for round numbers.

Decimal Places : set how many decimal places to have after your number. You should also add these decimals to your start and end values above.

Dec. Character : Choose the decimal character to use.
Options: [ Period (default), Comma ]

Use Grouping : turn ON to enable grouping, or leave OFF for no grouping. Grouping adds a separator between thousands.

Group Separator : Choose the group separator to use.
Options: [ Comma (default), Period, Space ]

Numerals : choose which set of numerals to use,
Options: [ Default (1,2,3,4), Arabic, Farsi, Thai, Custom ]
Trigger

Delay Time : set the delay time for the counting to start after the number has come into view on small screens.

Medium : set the delay time for the counting to start after the number has come into view on medium screens.

Large : set the delay time for the counting to start after the number has come into view on small screens.

Offset Units : choose the units for the offset values.
Options: [ Pixels, Percent, Em ]

Offset Values : set the offset values for the top and bottom of the screen. Counting won't start until these offsets are reached.

Threshold : the threshold is the point on the number where counting will start.

If the threshold is 0%, counting will start as soon as the first part of the number scrolls into view.

If the threshold is 50%, counting will start when half of the number is in view.

If the threshold is 100%, counting will start when the entire number is in view.

Trigger only once? : turn this ON to trigger counting only once per page refresh. Leave OFF to trigger counting each time the number is scrolled into view.
Easing

Easing Style : choose the easing style for the counting animation.

Smart Easing : use this with large numbers to set the threshold where easing will start, and the amount to be eased.
HTML

HTML Tag : choose the HTML tag for your number.
Options: [ Span, Paragraph (Default), H1, H2, H3, H4, H5, H6 ]

Line Height : adjust the line height for your number.

Align : Align your number to the left, center, or right.

Add a Link? : turn this ON to make your number a link, then add the link URL.

Enable Reduced Motion? : turn this ON to respect the visitors device preference for reduced motion. This will prevent counting on that device and show the end value instead.

Custom Classes? : enter a space delimited list of custom class names.
Breakpoints

Breakpoints : set the breakpoints for medium and large screens.
Font Styles

Font : choose the type of font to use for your number.
Options: [ Inherit (Default), Variable Fonts, Custom Variable Font (woff2), Google Font, Custom Font (woff2) ]

Font Size : choose to inherit or set a custom font size.

Units : set the font size units.
Options: [ Pixels (Default), Em, Rem ]

Sizes : set the font sizes for small, medium and large screens.

Font Color : choose to inherit or set a custom font color.

Colors : set the font colors for light and dark modes.
Font Styles - Variable Fonts

Font : choose one of the built-in variable fonts. The font weight range is also displayed next to the font name.

Font Weight : set your desired font weight anywhere in the range allowed by the font.
Font Styles - Custom Variable Font (woff2)

Font : set this to Custom Font.

File Location : set the location to your uploaded font file. Use woff2 only.

Font Name : enter a name for your custom font.

Weight Range : set the available font weight range of the custom variable font.

Font Weight : set the font weight within the range set above.
Font Styles - Google Fonts

Font : choose Google Font to enable Google Fonts.

Font Name : enter the font name exactly like it is on Google Fonts. Mis-spelling the font name will result in the fallback font being displayed instead.

Font Weight : choose the font weight to use for you number. Check on the Google Font website to see the available font weights for your chosen font. Setting a font weight that is not available will result in the fallback font being displayed instead.

Preconnect : to speed up downloading your Google Font, turn this ON and click the blue + button to add a Google Preconnect Stack to preconnect to Google Fonts.

Note 1 : Your page only needs to preconncect once, so if you already use Google Fonts elsewhere on the page, you are probably already preconnecting to Google Fonts. In this case, you can leave this setting turned OFF.

Note 2 : You need to delete the Google Preconnect add-on stack to fully turn it off.
Font Styles - Custom Font (woff2)

Font : set this to Custom Font.

Font Name : enter a name for your custom font.

Font File URL : set the location to your uploaded font file. Use woff2 only.
Margin

Type : choose from inherit, simple or detailed to either inherit or set custom margins.

Units : choose the margin units.
Options: [ Pixels, Percent, Em, Rem ]

Margin : set the margin for small screens.

Medium : set the margin for medium screens.

Large : set the margin for large screens.

Force : if you have issues setting a custom margin, you can enable this to add !important to the css.
Padding

Type : choose from inherit, simple or detailed to either inherit or set custom padding.

Units : choose the padding units.
Options: [ Pixels, Percent, Em, Rem ]

Margin : set the padding for small screens.

Medium : set the padding for medium screens.

Large : set the padding for large screens.

Force : if you have issues setting custom padding, you can enable this to add !important to the css.

Multi Switch Stack

Privacy Settings

Language Selector. Press to change the Cookie Notice language.

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience.

Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

In some cases, data obtained from cookies is shared with third parties and may be considered a “sale of personal information” under the California Consumer Privacy Act (CCPA). You can exercise your right to opt-out of that sharing at any time by disabling cookies.

Disable All

Enable All

Manage Consent Preferences

Strictly Necessary Cookies

These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.

Show Cookies

Name

Description

Analytics Cookies

These cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies, we will not know when you have visited our site.

Show Cookies

Name

Description

Embeded YouTube Videos

This website embeds YouTube videos using Privacy Enhanced Mode, however YouTube will still store identifiers in the browsers Local Storage. Also, when you press play, Youtube will set a marketing cookie. If you do not enable this category, you will get a link to open the video on the YouTube website instead.

Show Cookies

Name

Description

Functional Cookies

These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.

Show Cookies

Name

Description

Targeting Cookies

These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.

Show Cookies

Name

Description

Cancel

Save & Close

Count Stack

Installation & Updates

Using Count

Stack Settings

Count Stack Settings

More Tutorials

Intro to Firebase

PWA Stack

Multi Switch Stack

Count Stack

Installation & Updates

Using Count

Stack Settings

Count Stack Settings

More Tutorials

Intro to Firebase

PWA Stack

Multi Switch Stack

Privacy Center Stack