How to use Odometer

Odometer is a scipt that animates smooth transitions between numbers. This interactive component smoothly transitions the digits upwards, creating a visually engaging effect that draws attention and emphasizes the significance of the number.

Add Script to the Library

1. To Begin, download the script file here.
2. Go to Libraries > Scripts > Custom and click New Script.
3. Save script “Head – Odometer” in your console.

4. To add this script to a creative in the future, you can simply follow the instructions below:

Adding Odometer to the creative

1. Add the “Head – Odometer” script found in the “Custom Scripts” category to the head of the creative.

2. Select or add a text element on the page and edit it by selecting Standard Text making sure HTML is toggled on and then paste the following code:

<span class=”odometer” data-delay=”0″ data-prev=”0″ data-val=”64″>0</span>%

a. the data-val=”64″ sets the final number of the odometer

b. the >0<    sets the starting number of the odometer

3. Save your changes and test.

Share this: