Marketplace
Made in Webflow

How to animate a number counter?

5232 views
site profile thumbnail

Description

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
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

We miss comments too!

Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!

As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.

counterautocounternumbersanimationtipswebflowtipstutorialnumbercountercountupnumber-counterhow-to

More by Webflowtips

See profile
View details
Text Reveal Different Directions
230
802