Counter effect with figures

Hi

If you scroll down on this page

https://annualreport.skeyes.be/en/homepage/?_ga=2.78646807.288670625.1594637038-1585139353.1594637038

you’ll see that figures are building up.

Any solution where we just write the start and end values, where we design the figures, and where we can play with some properties for the effect?

Thank you!

There are many script on the internet that do it and certainly some solutions on the forum if you search for them.

The idea is basically JavaScript triggered on view port enter and a script using setInterval count from a start to an end value provided through dataset attributes. The following code is not tested and only written into the forum as dummy example code to get you started:


var a = parseInt(element.dataset.startValue);
var b = parseInt(element.dataset.endValue);

var i = setInterval(function(){
    if (a<b) {
        a +=1;
        element.innerHTML = a;
    } else {
        clearInterval(i);
    }
},100)

This updates every 100ms so 10 updates a second. Setting dataset values in done in the attributes panel and read about camelcasing (startValue for example would be data-start-value). Also, you could create more dataset settings like pre and post string to add in the assignment step for innerHTML or even put the update milliseconds into a datasets string.

1 Like

you can use https://inorganik.github.io/countUp.js/ to simplify things ...

1 Like

countUp.hype.zip (18.9 KB)

as boilerplate ... scroll into view and the count starts

1 Like

Thank you for this, I will see how much I can reuse it without knowing the code.

All within ...

setup:

  • countUp-library in the resources

  • code in the head makes the scriptmodules accessible within hypefunctions

  • a symbol that contains a text-element with a class "target"( <- this'll display the numbers) and a timeline that runs a hypefunction (explained in the last listpoint) via timelineaction

  • every symbolelement has two data-attributes:
    **data-countupvalue** (<- this'll set the number to count up to for this symbolinstance)
    **data-duration** (<- this'll set the duration for the countup for this instance)

  • every symbolelement has a behavior "on enter viewport" that runs the above mentioned timeline of (all) the symbols

  • a hypefunction that is executed by the timelineaction within the symbolinstances. This script will take the data-attributes of each symbolinstances as values for the countup and start the count up

/////////////////
to be mentioned:
all options that countUp offers for diplaying:

 startVal?: number; // number to start at (0)
  decimalPlaces?: number; // number of decimal places (0)
  duration?: number; // animation duration in seconds (2)
  useGrouping?: boolean; // example: 1,000 vs 1000 (true)
  useEasing?: boolean; // ease animation (true)
  smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
  smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
  separator?: string; // grouping separator (',')
  decimal?: string; // decimal ('.')
  // easingFn: easing function for animation (easeOutExpo)
  easingFn?: (t: number, b: number, c: number, d: number) => number;
  formattingFn?: (n: number) => string; // this function formats result
  prefix?: string; // text prepended to result
  suffix?: string; // text appended to result
  numerals?: string[]; // numeral glyph substitution