Streaming live at 10am (PST)

Countup.js embed


#1

Hi Guys,

I’m really trying hard to embed the countup.js code into an embed element on a website. I followed some instructions from samliew as far as i am aware to the letter. I have used code embeds before but this one is beyond my humble webflow skills. Can you please help? I know I’m missing something obvious, but can’t workj out what it is.

I would like to have a row element with a few columns, each with a statistic that counts up to a total, all neatly in a row, and responsive. Again, ideally, it would be great if the count up could start once the parent section is in view. Doable in Webflow?

https://preview.webflow.com/preview/intelligent2?preview=bc7fd4f6c7189d74f7905c7366f59c1d

Thx in advance for your help!

Mubin


#2

Hi @mubin, thanks for the great question. Although we can go look for it, it is usually helpful to provide a link to the countup.js documentation in the post as well as the link to the site.

In most cases, people trying to help with this will create a small test site, showcase the site then share that with you, using the instructions from countup.js and provide that as an example for you to look at.

A link to the original post in the forum also helps. From the description, it sounds doable :slight_smile:

Thank in advance.


#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:
http://inorganik.github.io/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 (http://inorganik.github.io/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


#4

Sorry, I missed out the link I pasted into the before tag, which is:

Thanks
Mubin


#6

OK, so I cant paste the script code!


#7

After pasting code in the forum post editor, select the code again and click the format button, or indent your code with 4 spaces on every line.


#8

thx @samliew

So I pasted In the before body tag…

<script src="https://cdn.rawgit.com/inorganik/countUp.js/master/countUp.js"></script>    

Kind regards
Mubin


#9

How to embed files hosted on Github