CounterUp.JS help!

Design help General
1

I’ve been slamming my head on the wall trying to get this effect to happen.

I’ve seen someone post about this before, using this Jquery https://codepen.io/anon/pen/RMEwPw?q=counter&limit=all&type=type-pens#code-area on their webflow site. However, I don’t want to just copy/past what’s written here, I want to apply the JS to my own html/CSS.

https://preview.webflow.com/preview/ia-redesign-mockup?preview=01ba97b88cf4ffa9a47c7a8f02edf14a

I want the numbers “A Year in Review: 2017 Highlights and Insights” section to count up when scrolled into view.

I created a around each number called “counter,” and included the following CSS and Java in the custom code:

Inside head tag:

<style>
.counter {
  animation-duration: 1s;
  animation-delay: 0s;
}
</style>

Before body tag

<script src="https://cdn.jsdelivr.net/jquery.counterup/1.0/jquery.counterup.min.js"></script>

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

what am I missing here?

PS I am very new to Java and am basically just trying to copy and paste what I see elsewhere. If there’s a more elegant solution to this, I’d love to hear it.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like