Counter effect with figures

Using JavaScript with Hype
1

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!

2

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
3

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

1 Like
4

countUp.hype.zip (18.9 KB)

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

1 Like
5

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

6

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
7

Hi h_classen, sorry to bother you about this old topic but, I’m on a project showing a lot of numbers and have used your eminent script for countups, which has been working like a charm–locally. Thanks by the way! But after uploading the document to my server it doesn’t seem to be working any longer. What am I doing wrong? Thanks in advance!
count_issue.zip (23.6 KB)

8

does server mean, that you've embedded it somehow?
my guess is that you stripped the headsection ...

9

Thanks for your swift reply! Much appreciated!
Nope, it was indeed the same export from the file attached which you see is working fine locally, but after the upload it and no go whatsoever… Any clue?

10

count_issue.hype.zip (23,7 KB)
it's an issue regarding the mimetype .... i guess .... easiest workaround: make use of the umd-version ... see attached file

1 Like
11

I have read this many times before on the forum, but it always seems to be as relevant; you are a true hero!!! Works 100% after upload! Thank you so very much!

1 Like