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.
