Count Up Numbers with various Values

Animation
1

count.hype.zip (17.1 KB)
Hi everyone, first I’m hype newbie and don’t have much experience working with it. I searched the forum, and modified hype file I found here (look on the attachment).
The problem that I can’t solve, is that I have more than only one value and I don’t know how to set it up or how the whole structure works. For example the second value should be 670€ third 698€ and so on, everything should start simultaneously. Thanks for any help/advice

2

count.hype.zip (14.0 KB)
feed it with data-attributes set in the attributes panel of each symbol …

1 Like
3

Thanks much for your time! I was thinking about making gif for every number that I need you saved me lot of time :slight_smile:

1 Like
4

thx :slight_smile:

anyway, i would always consider using https://inorganik.github.io/countUp.js/

this library is lightweight and offers this great visual setup :slight_smile:

to include it within hype and have access in hypes functions (new hypeDocument.customData.countUp(target, options)) put this in the head:

 	<script src="${resourcesFolderName}/countUp.min.js" type="module"></script>
	
	<script  type="module">
	import  { CountUp }  from './${resourcesFolderName}/CountUp.min.js';

  function myCallback(hypeDocument, element, event) {
   hypeDocument.customData.countUp = CountUp;
    return true;
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
	</script>
1 Like