data-ix-countup
Count-Up
Summary
This solution allows you to create animations where a number counts up to the number in the text when scrolled into view — useful for stats sections or similar.
01
Prefix
As with all attributes in this library all attributes in used when implementing this solution start with the following prefix: if you see the tag {prefix} used on this page it refers to the following prefix:
02
Elements
The countup solution just relies on one data attribute applied directly to the number you want to animate from 0 to the stated number.
Attribute Name
Value
Default
Description
data-ix-countup=item
wrap
boolean
The text or span element containing the number you want to animate
Note: the text span shouldn't include non number characters in order for the animation to work, if additional symbols like % signs are needed put them in a different text block or span.
03
Options
All options are applied to the data-ix-countup=item element.
Attribute Name
Value
Default
Description
{prefix}-start
string
top bottom
A GSAP ScrollTrigger start parameter to dictate when the animation should start.
{prefix}-duration
number
2.5
Sets the duration of the entire interaction in seconds
{prefix}-active
string
is-active
an active class added to the element during the animation and removed after the animation is complete.
