Streaming live at 10am (PST)

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


#1

Hi everybody,

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

http://github.hubspot.com/odometer/docs/welcome/
Scroll down for code

More: http://github.hubspot.com/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


#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:


#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!!


#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 =/


#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.