Demo to preview the settings

Introduction

Animate counting in a text element by providing a start and end value and it will create animations that display numerical data. The plugin can count in either direction (up or down), depending on the start and end values that you pass. Can be fully controlled with workflow with useful events and states.

How to setup

Provide an ID to the text element and set this ID in the plugin element settings. Do not use bb codes for styling. Can be used as a simple timer

Plugin Elements Properties

This plugin has one visual element which can be used on the page: CountUp PRO.
Image without caption

Element Fields

Title
Description
Type
Text ID
The ID of the text element with numbers to be animated
text
Start
Number to start at
number
End
Number to end at
number
Decimal Places
Number of decimal places (numbers after dot)
number
Decimal
text
Duration
Count animation duration in seconds
number
Use grouping
example: 1,000 vs 1000
yes / no
Separator
Grouping separator
text
Use easing
ease animation
yes / no
Smart Easing Threshold
Smart Easing Threshold: smooth easing for large numbers above this if useEasing
number
Smart Easing Amount
Amount to be eased for numbers above threshold
number
Prefix
text prepended to result
text
Suffix
text appended to result
text
Autostart
Auto start animation on page load

Exposed states

Title
Description
Type
Is counting
Informs you whether the animation is currently in progress or has completed
yes/no

Events

Title
Description
Count ended
Fires when the count ends

Actions

Title
Description
Start
Starts the counting
Toggle Pause Resume
Toggles pausing and resuming the counting
Reset
Resets the counting
Update
Updates the end value and animates

Workflow example

1. On the page where you want to use the CountUp animation, add a text element that will display the animated number and provide it with an id
Image without caption
  1. Add the plugin visual element to the page and configure the desired settings
Image without caption
  1. Use the plugin actions in your workflow
Image without caption

Changelogs