Countup.js embed

Design help Custom code
3

Hi Dave,

Of course, apologies and many thanks in advance for your help!
So here is what I did:

I found this counter which counts up fast in a visually appealing way:
CountUp.js which is on GitHub.

As per some instructions on embedding in Webflow I found from @samliew: How to embed files hosted on Github

I changed the URL of the GitHub code from: https://raw.githubusercontent.com/inorganik/countUp.js/master/countUp.js
to: https://cdn.rawgit.com/inorganik/countUp.js/master/countUp.js

I then pasted the following script into the before tag in Project Settings:

and embedded the below code into the place I wanted the count up to happen using the Embed element:

<div id="ajaxContent"></div>
  <script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
    $.get('https://cdn.rawgit.com/inorganik/countUp.js/master/countUp.js', function(data) {
      $('#ajaxContent').append(data);
    });
  });
  </script>

There are some options for the counter, including start and end value (ie the number to start counting from and ending at) - I couldn’t find these variables in the script documentation, but the original link to countup.js (CountUp.js) gives the parameters to enter and prints the code. I copied that code:

var options = {
  useEasing: true, 
  useGrouping: true, 
  separator: ',', 
  decimal: '.', 
};
var demo = new CountUp('myTargetElement', 0, 1000000, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

I am unsure where to use that extra code to give the counter its parameters and display appropriately in the Embed element once published. FYI published link for ease of access is http://intelligent2.webflow.io/

I would like to use this counter about six times on the page, all in a row, so I’m using the row/columns element to create that and ideally, for the count up to begin once that section comes into view, so the count up is visible to the site visitor.

Also, are you aware if it is possible to style the font and font colour of the resulting countup using webflow styling?

If there is anything else you need, please do not hesitate and thank you again in advance for your support.

Kind regards

Mubin