Counting To

Instructions

Overview

Add animated counting numbers to your website that count up or down to a target value when scrolled into view or on page load.

Getting Started

Quick Start

1. Click the Copy Component button on the top of the page.
2. Paste the component into your Webstudio site.

Manual Start

1. Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Counting%20To/counting-to-v1.0.js"></script>[/code-block]

2. Add the Attribute: Add the dv-counting-to attribute to any text element you want to animate: <span dv-counting-to="0-to-100 duration-1000">0</span>

Customization Options

Animation Range

• Use the format start-to-end to define the counting range
• Example: dv-counting-to="0-to-1000" counts from 0 to 1000

Trigger Types

• Use these options in the dv-counting-to attribute:
  • auto = Starts counting immediately when loaded
  • inview = Starts counting when scrolled into view (default)
• Example: dv-counting-to="0-to-100 auto"

Animation Settings

• duration-X = Animation duration in milliseconds (default: 1000)
• ease-in = Starts slow, ends fast
• ease-out = Starts fast, ends slow
• ease-in-out = Starts and ends slow, fast in the middle
• linear = Constant speed throughout (default)
• Example: dv-counting-to="0-to-100 duration-2000 ease-in-out"

Notes

• The animation only runs once per element
• For best results, set the initial text content to match the starting value
• Works with any numerical values, including negative numbers
• Animation is optimized to update only when the displayed number changes