How do I add a count up animation to my website?

Add the OneType Transforms script tag to your site, then place an element with the ot="count-up" and ot-end attributes. The number animates from zero to the target value when it scrolls into view. No JavaScript needed.

Does the count up animation trigger on scroll?

Yes. The counter uses IntersectionObserver to detect when the element enters the viewport. The animation starts automatically when users scroll to it. By default it plays once, but you can set ot-once="false" to replay on every scroll.

Can you add a prefix or suffix to animated counters?

Yes. Use the ot-prefix attribute for text before the number (like $ or EUR) and ot-suffix for text after (like % or k). Both animate alongside the number during the count up.

Does the animated number counter work on Webflow?

Yes. Add the script tag in Site Settings > Custom Code. Then add ot|count-up and ot-end|1500 as custom attributes on any element, or use an Embed element with the HTML. Requires a Basic plan or higher.

Is the count up animation free?

Count Up is a premium transform on OneType Transforms. It requires a Pro plan ($149 one-time) or Agency plan ($99/mo). Both include lifetime updates and all premium transforms.

Count Up Animation - How to Add Animated Number Counters to Any Websit