Discover the best numbers websites created by professional designers. Get inspired and start planning your perfect numbers web design today!

You can easily animate a number counter like the Pros do! To do that you only have to:

1) Add a class to the number you want to animate 
2) Copy and paste the code in the "Settings > Before body Tag" 
3) In the code change the name of the class to the one you used (classes start with a ".") . 
4) Modify the parameters that work for you (start, end, duration, delay, true, repeat, decimals, currency, separator) 

*Repeat this process If you have different numbers with different parameters (check the clonable for an example)
** Remember that this will only work on published sites. 

Sign up for the lesson: https://www.webflowtips.com/b/how-to-animate-a-number-counter

If you have any questions feel free to comment.

P.S 🙂  🙌  - Like or follow if this was useful for you.

10 of 50

Webflowtips - Animated Number Counter

How to animate a number counter?

Based on https://www.ju.st/learn

This cloneable is for learning purposes only. I do not own the rights to this design and content.

Just Egg - Land Scroll

Vibrand Design

Hey Webflow Family,

we are back with a new community cloneable for you all. 
There are many ways to animate numbers, however a flexible solution to also display them like an odometer is very rare. A few days ago we came across Hubspot's Odometer Library and thought this is what the community needs. So here we are, with our Odometer Count-Up Cloneable for you.

Some features summarized: 
1. count up by 1 in a fixed interval
2. trigger odometer animation on scroll with GSAP scrollTrigger
3. add currency symbol to show prices in an unusual way
4. interval increase by own value
5. interval increment with a randomly generated number in a range 
6. show numbers on button click
7. and a bit of educational stuff to understand how you can implement this in your project.

Clone it, create with it and have fun with it. 

Starting today, we will be creating cloneables like this more regularly. :) 
Be excited. 

Best regards from Potsdam, Germany

Dennis from Vibrand Design

Odometer Count-Up

I created a partial replica of the Space X falcon 9 landing page using Webflow and the F'insweet client-first system.

Let mek now what you think in the comments section.

I am not involved with SpaceX. All the assets and images belong strictly to SpaceX and they are only used here for demonstration purposes.

Falcon9 replica

falcon9-replica

Showcase the company stats in your website in a nice and cool way by using one of our 4 free stats sections.

With our Stats Section Webflow Cloneable, showcase your company stats quickly and easily!

- - - - - - - - - -

Interested in this free Webflow Cloneable?

• Check out a live preview on: https://stats-cloneable-brixtemplates.webflow.io/

• Get the cloneable Figma file to customize the styling and graphics: https://www.figma.com/community/file/1085649688113173627

- - - - - - - - - -

• BRIX Templates - Looking for more Webflow templates? Take a look at our collection of premium & free Webflow Templates on https://brixtemplates.com/

• BRIX Agency - Looking for a hand to design & develop an amazing Webflow website? Get in touch with our amazing team on https://brixagency.com/

Discover numbers websites built by the Webflow community

Discover numbers websites built by the Webflow community