Counter interaction

Design help Custom code
1

Hi all,

I would like to integrate a counter interaction like this one: https://codepen.io/SeanWhelan/pen/bErZYo?q=counter&limit=all&type=type-pens on a webflow page.

I put the CSS in header, the JQ in footer and the Html in embed code, but it didn’t work out: http://radostinas-cool-project.webflow.io/

It would be very nice if you could help me. Thanks a lot!

Kind regards,
Radost

2

You did not import the counterUp plugin script and its dependancy. jQuery does not need to be loaded again as Webflow loads a copy for you.

Screenshot_2018-02-01_210225
Screenshot_2018-02-01_2102251014×809 44.6 KB

3

Hi @samliew, thanks a lot for your help! However, I have no idea where and how should I import the counterUP plugin :confused: Should I import all 3?

Thanks!

4

Before

<script>
$('.counter').counterUp({
  delay: 10,
  time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
$('h3').addClass('animated fadeIn');
</script>

Insert

<script src="SCRIPTurlGOEShere"></script>

for each script (in same order as codepen), replace SCRIPTurlGOEShere

2 Likes
5

I got it :smiley: Thanks a lot!!

6

Can one of y’all explain exactly what you did to get this to work?