Is it Possible to Include this Odometer JS code in Webflow?

Design help Custom code
1

Hi everybody,

How would it be possible to create this odometer effect for certain numbers on a page in Webflow:

Scroll down for code

More: odometer

Thank you for your help, I would love if somebody could tackle this challenge!

2

Hi

You mean like this?
http://odometer.webflow.io

Here’s the preview:
https://preview.webflow.com/preview/odometer?preview=e81d1603e6a306bcb5649f05ffcdbbe3

1 Like
3

@jorn thanks!

Yes, very very similar to that. The only difference is that I’d like to sue it in a CMS page, so no embed.

Can this effect be applied to a text object (e.g. by giving it an ID)? It should start t “0” and then just count up to the value in the CMS…

Thank you for your help!

4

Ok, check the links out now. I made a collection with collection pages like this:
http://odometer.webflow.io/numbers/one
up to five

Still a embed but with a trick :grinning:

2 Likes
5

Wow, thank you very much. Would you mind keeping that page live for a while. I will create these pages in about two weeks and it would be very helpful. Thank you!!

1 Like
6

Sure no problem :grinning:

Edit: I made a quick change. The numbers on collections pages now count up to the number in the collection item. The previous version did the opposite =/

1 Like
7

One last question: Is there a way for the “starting point” of the odometer to be 0 and the end point to simply be what is hard-coded in the CMS.

The reason I am asking is because the CMS text field with the number will be dynamically be replaced with data from an API. So if it get’s replaced with say $100 I’d love for the odometer to run from $0 to $100 (without the use of an embed field). this way the item could also be styled in Webflow.

Thanks!

8

Yes, just change the number inside the embed. I updated the preview and it will start at 0 now.

9

Hello, Is it possible to copy the preview and use on my site?

10

Here you go =)

https://webflow.com/website/odometer?s=odometer