Resource Documentation
Core (Essential for Functionality)
Add the following script before the closing body tag.
<script src="https://cdn.jsdelivr.net/gh/hadiaslam-repo/pro-webflow-components/pro-count-animation.js"></script>Add pro-count-element to define the element you want to animate.
Add pro-count-element to define the element you want to animate.
Add this attribute to the element you want to animate, this will create a basic count up animation
You do not need to define the target value separately — it will automatically be taken from the element's text content.
It’s not necessary to create a separate span for non-numeric text. Simply add the attribute to your text element — the non-numeric content will remain static while the digits animate.
Customization (Optional Enhancements)
Add pro-count-direction to define the animation direction
Add pro-count-direction to define the animation direction
You can override the default animation by adding this attribute, which gives you the option to choose from three different animation directions.
You can add this attribute to the parent element, and all pro-count-element elements inside will inherit it. This makes it easier to manage multiple elements at once.
Add pro-count-duration to define the duration
Add pro-count-duration to define the duration
Add this attribute to define the animation duration. In the value field, simply enter the number of seconds.
The default duration is 2 seconds. You can set a minimum of 1 second and a maximum of 5 seconds. If you enter a value less than 1, the animation will run at 1 second. If you enter a value greater than 5, the animation will run at 5 seconds.
You can add this attribute to the parent element, and all pro-count-element elements inside will inherit it. This makes it easier to manage multiple elements at once.
Add pro-count-flip to define the no of flips
Add pro-count-flip to define the no of flips
Add this attribute to define the no of flips per digit
Flip defines the number of rotations each digit will perform before landing on the target digit. For example, if the flip value is set to 5, each digit inside the pro-count-element will rotate 5 times before settling on the target number.
The default number of flips is 10. The minimum allowed is 3 and the maximum is 10. If you enter a value less than 3, it will default to 3; if you enter a value greater than 10, it will default to 10.
You can add this attribute to the parent element, and all pro-count-element elements inside will inherit it. This makes it easier to manage multiple elements at once.
Add pro-count-delay to add a delay before animation
Add pro-count-delay to add a delay before animation
Add this attribute to define the amount of delay in seconds before animation begins
This is useful if your pro-count-element is placed in the hero section and you also have a preloader
You can add this attribute to the parent element, and all pro-count-element elements inside will inherit it. This makes it easier to manage multiple elements at once.
Add pro-count-stagger to remove the stagger
Add pro-count-stagger to remove the stagger
Add this attribute to remove the stagger from you flip animations
By default, the flip animations have a stagger effect between digits, but you can disable it if needed.
You can add this attribute to the parent element, and all pro-count-element elements inside will inherit it. This makes it easier to manage multiple elements at once.
Add pro-count-number to remove the gap between digits
Add pro-count-number to remove the gap between digits
Add this attribute to remove the extra white space between digits
Sometimes, you might notice a slight gap between digits when using the flip animation. This happens because each digit has a different width, and it's especially noticeable when the number '1' appears in your target value. However, this doesn’t happen with every typeface. What the pro-count-number attribute does is generate all the dynamic numbers using the same digits as the target value. This ensures the overall width remains consistent.
You can add this attribute to the parent element, and all pro-count-element elements inside will inherit it. This makes it easier to manage multiple elements at once.
