{"id":6982,"date":"2024-10-30T18:32:19","date_gmt":"2024-10-30T18:32:19","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=6982"},"modified":"2026-01-28T15:37:49","modified_gmt":"2026-01-28T15:37:49","slug":"how-to-use-odometer","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-odometer\/","title":{"rendered":"How to use Odometer"},"content":{"rendered":"\n

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
<\/strong>
1. To Begin, download the script file here<\/a>.
2. Go to Libraries > Scripts > Custom and click New Script.
3. Save script \u201cHead – Odometer\u201d in your console.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

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

Adding Odometer to the creative<\/strong><\/p>\n\n\n\n

1. Add the “Head – Odometer” script found in the “Custom Scripts” category to the head of the creative. Add the “Body- Odometer” script found in the “Custom Scripts” category to the body of the creative.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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:<\/p>\n\n\n\n

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

a. the data-val=”64″ sets the final number of the odometer<\/p>\n\n\n\n

b. the >0<\u2006 \u2006 sets the starting number of the odometer<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3. Save your changes and test.<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1],"tags":[2086,2421],"class_list":["post-6982","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-interactive-components","tag-odometer"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/6982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=6982"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/6982\/revisions"}],"predecessor-version":[{"id":8653,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/6982\/revisions\/8653"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=6982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=6982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=6982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}