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

CMS Pricing Slider

Simple tutorial for a counter interaction on section. Original pen from Sean Whelan

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃

✒️ Licence Notes:

⦿ Images available under CC0 (Unsplash, Pexels, Freepix or Similar)
⦿Typography available under SIL Open Font License 1.1 (Inter)
⦿ Iconography available under CC0 (UpLabs, Flaticon, Noun Project)

Count Up

Flowbase - JS Count Up

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?

I loved the Solana landing page and couldn't resist rebuilding it in Webflow. I've also layered a few subtle effects on top.

Solana [Rebuild]

CountUp.js

Multiple CountUp.js Examples (scroll, currency, intervals)

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

Watch tutorial at https://www.patreon.com/posts/66950007

Assets from codesandbox.io

Persistent Dark Mode Switch

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

Apply the starting number in the text. Apply the final number and duration in the attributes.

Overview: Cosmos is the first project I ever completed in Webflow on my own. While it was in the same visually, except for the countup animations, I have touched it up in order to make the project have cleaner code, use less unnecessary javascript, and improve the SEO performance of the page. 

Details: While most things remain the same, the navigation effect was initially created using 2 navigation elements. This is a poor practice for SEO. I changed it to 1 element + vanilla JS for the effect. I also replaced a large portion of hover animations & used custom css animations instead. This way, less unnecessary JS is used and therefore, cleaner & better performing code. The last touchup were countup animations using finsweet attributes for integers & jQuery + ajax for decimals.

Disclaimer: The site was not designed by me. In fact it already exists & here's the url of that site: https://cosmos.network . The project I made was for educational purposes only!

Cosmos

Looking to add a countdown or number count up to your website? Clone our free countdown animation Webflow Template and add it to your website as easy as 1, 2, 3.

- - - - - - - - - -

Interested in this free Webflow Cloneable?

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

• Click 'Clone project' to get a clone on your Webflow account

• Looking for a tutorial on how to easily customize this Webflow cloneable? Check out this video tutorial we created: https://youtu.be/cEen998kChc

- - - - - - - - - -

• 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/

26. Countdown Animation Webflow Cloneable Template - BRIX Templates

Countdown / Countup Animation Webflow Template | BRIX Templates

A cute lil count up animation to add to your site!

Count Up Animation

Based on the client first model and the Digidop website

webflowagency

webflowagency-test

Add animated, fully customizable counter to the pages of your Webflow  project!
With this widget you can easily customize the typography, animation delay, shadows, effects, borders and style options in just a few steps.

Count up Cloneable

Count-up

Hello there!
Welcome to Number Counter Javascript Animation!

Enhance your Webflow site's engagement with dynamic number counters powered by JavaScript, showcasing statistics and achievements in real-time, and seamlessly integrating custom code to create animated numerical transitions that capture attention and convey impact.

Whether you are a startup looking to establish your online presence or an established business seeking a fresh approach, we are here to assist you. Don't hesitate to get in touch. Let's collaborate and create something remarkable together.

Regards,
RSA CreativeStudio
hello@rsacreativestudio.com

Number Counter 

FlowDough

Mighty Buildings – Combining 3D printing, robotics, & material science.
Design by – Baunfire
Development by – FlowDough

Discover countup websites built by the Webflow community

Discover countup websites built by the Webflow community