Animate numbers anywhere in your statement using a ‘count up’ to help draw the user’s focus to important values.

When your user scrolls down their statement, after a sub-second delay, the on-screen number will become visible, then begin incrementing. As the counting animation nears the target ‘to’ number, the incremental pace slows down until finally the ‘to’ number is shown on screen when the animation stops.

This recipe card explains how to activate this custom Html animation using a Css class and variety of attributes to control the timing and currency display of the numeric animation.

Specifics

Css class: visual-countup-animation

Html Attributes:

  • visual-from-number (default 0) The starting number of the animation.

  • visual-to-number (default is the value inside of the tag, converted to a number). The ending number of the animation. This value can be defined as an Html attribute, or as the content inside of your Html tag.

  • visual-duration-ms (default 1000) The amount of time, in milliseconds, the animation takes to complete.

  • visual-delay-ms (default 250) The amount of time, in milliseconds, the animation should wait before beginning.

  • visual-offset-px (default 500) - The number of pixels beyond the top of the screen before the Waypoint arrival is triggered.

  • visual-decimal-places (default 2) - The number of digits after the decimal for fractional value animation.

  • visual-currency-symbol (default undefined) - The symbol or text to appear left of the animated number.

  • visual-currency-symbol-pre (alias for visual-currency-symbol)

  • visual-currency-symbol-post (default undefined) - The symbol or text to appear right of the animated number.

Samples

ExploreX : Count Up Fuel Prices

ExploreX Count Up Fuel Prices
<h2>Keep the Engine Running!</h2>
<br>

<div>
  <h3 class="visual-countup-animation"
      visual-to="2.891"
      visual-duration="10000"
      visual-from="0.5"
      visual-decimal-places="3"
      visual-currency-symbol="$"
      visual-currency-symbol-post=" Price Per Gallon in SC"/>
</div>


ExploreX : Count up Total Rewards

ExploreX Count Up
<h2 class="visual-countup-animation"
    visual-duration-ms="1750"
    visual-delay-ms="0"
    visual-from-number="0"
    visual-decimal-places="0"
    visual-currency-symbol='$'>
      [[Summations.TOTAL_EMPLOYER]]
</h2>

References

The Animation Library in use is CountUp.js published under the MIT License on Github by inorganik. https://inorganik.github.io/countUp.js/