Documentation Animated Numbers

Module overview

This module can show multiple numbers next to each other and animate them to increase from 0 to a value set by you. This can add some extra flair and make the numbers you want to convey to the website visitor pop.

Setup guide

Content

Anchor

This will create a link to another location within your page. If left empty it will not create an anchor object.

Title

This is a text field in which you can put the title of the module, or you can leave it empty if you want. It will appear above the animated numbers in the middle of the module. Its styling will be covered later in the setup guide.

Counter group

This is the core of the module this group will contain all the counters you add. It will start with one counter but using the “+ Add” button you can add as many as you like. Individual counters can of course be edited, when you hover over a specific counter a pen icon will appear. If you click on that the settings for the counter will appear.

Counter settings

The first and most important setting is the number the counter will display. This can be any positive integer. This field is also required, as is the point of the module, and it will not work otherwise.

Prefix and suffix

Below the number there are two text fields for a prefix and a suffix. These will appear before and after the number respectively and can be added to clarify the meaning of the number they are placed around. It can convey the unit for example. These fields are not required.

Text under the number

This text will be placed under the number and can further add some meaning to the numbers you want to convey. This field is also not required.

Animation tab

Under this tab all settings pertaining to the animation of the numbers are contained.

Enable animation

This Is a tick box to control whether or not the numbers will be animated. It will be ticked by default, as the module is called Animated Numbers after all, but the animation can be disabled if it causes problems or you just don’t want it.

Animation speed

The animation speed controls how fast a single number will increase from 0 to the set value. A higher end value will not take longer than a lower end value. The higher end value number will just increase faster. The speed you specify is the time a single number will be animated in milliseconds. The default value is 2000ms, which is two seconds. This field is required, as without it the module will not function.

Subsequent delay

The first number (the upper leftmost one) will always start immediately. If there is a subsequent delay applied, the second number will only start after the delay has finished. The third number will only start after the second number has started and the delayed amount of time has passed.

For example: I set the subsequent delay to one second. The first number will start to animated. Then after a second the second number will animate. And after two seconds the third number will animate. Note: the numbers don’t wait for the other number to finish, they only wait for the delay amount of time according to their position in the number list.

Style tab

Under this tab a number of things pertaining to the visual style of the module can be set.

Margins and padding

Top margin

This margin will create space between this module and the previous piece of content on your website. This can be set to no space up to quite a large amount of space.

Top and bottom padding

The top and bottom padding will be applied within the module, so the text has some headroom and some leg space. If you set this to no padding the title will touch the top of the module, and the bottom text will touch the bottom. The difference between this and the top margin is that the top margin displaces the module down, and the padding increases the size of itself around the text.

Side to side padding

This padding is almost the same as the previous padding, but on the sides of the module. This can also be set from no space at all to quite a large amount of space.

Heading level

This value indicates the level of heading the title has. This will change its size and change its styling if you have styling specific to different heading levels.

Background color

This is the color that will appear behind the text and numbers. If you do not touch this value the background color of this module will inherit from the theme you have applied to the page.

Text color

This is the color of the text and numbers in this module. If you do not set this it will inherit from the theme you have applied, just like the background color.