{"id":19775,"date":"2019-04-10T21:38:32","date_gmt":"2019-04-10T13:38:32","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19775"},"modified":"2019-04-10T20:52:50","modified_gmt":"2019-04-10T12:52:50","slug":"number-transitioning-odometer","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/","title":{"rendered":"How to Create Smooth Numbers Transitioning For Your Site"},"content":{"rendered":"

One of the effective ways to make a presentation<\/a> of numerical information more interesting is by adding a transition animation<\/strong>. Creating a transition animation can be done with javascript<\/a>, but the coding will take you a long time. For a quicker alternative, try Odometer<\/a>.<\/p>\n

Odometer<\/a> is a javascript plugin<\/strong> that can help you make your numerical information more attractive <\/strong>with smooth transitions and cool themes. It\u2019s easy to set up and is supported on many current browsers.<\/p>\n

Recommended Reading:<\/strong> How To Implement Infinite Page Scroll Effect In Static Webpages [Tutorial]<\/a><\/p>\n

Implementation<\/h2>\n

Odometer is a standalone javascript plugin<\/strong>. You only have to include the js file and its theme in your page with the following code:<\/p>\n

\r\n<link rel=\"stylesheet\" href=\"odometer-theme-car.css\" \/>\r\n<script type=\"text\/javascript\" src=\"odometer.js\"><\/script>\r\n<\/pre>\n
You\u2019re done! Now any element that you wrap with the odometer<\/code> class will be transformed into an odometer.<\/p>\n
In this example, I\u2019m using a car-like odometer theme. Odometer comes with six other different themes, namely the default theme, digital, minimal, plaza, slot machine and train station themes. You can head over to the demo page<\/a> to see them in action.<\/p>\n
To update the value, you can use either native javascript or a jQuery code. First, call the setTimeout<\/code> function, then define the updated value like in the following snippet:<\/p>\n
\r\n<script>\r\n  setTimeout(function(){\r\n    odometer.innerHTML = 5555;\r\n  }, 1000);\r\n<\/script>\r\n<\/pre>\n
Or you can use a jQuery form like so:<\/p>\n
\r\nsetTimeout(function(){\r\n  $('.odometer').html(5555);\r\n}, 1000);\r\n<\/pre>\n
The value of 1000 in the code means the update process will be executed one second after the page has fully loaded.<\/p>\n
Then, add an odometer<\/code> class to any element you want, for example:<\/p>\n
\r\n<p class=\"odometer\">3252<\/p>\r\n<\/pre>\n
And the value of 3252 will then be changed to 5555 (as defined earlier) with a cool transition.<\/p>\n
\"demo<\/figure>\n
Options<\/h2>\n
For more advanced features, Odometer provides you with some options to customize. This is useful when the default setting doesn\u2019t suit you. To be able to set options, first create an odometerOptions<\/code> object like so:<\/p>\n
\r\n<script>\r\nwindow.odometerOptions = {\r\n  format: '(ddd).dd'\r\n};\r\n<\/script>\r\n<\/pre>\n
The format<\/code> option will affect the number formatting rule, like showing a decimal point before certain digits. (ddd)<\/code> means there is no decimal point in the number. And for other options, check out the following list:<\/p>\n
\r\nwindow.odometerOptions = {\r\n  auto: false, \/\/ Don't automatically initialize everything with class 'odometer'\r\n  selector: '.my-numbers', \/\/ Change the selector used to automatically find things to be animated\r\n  format: '(,ddd).dd', \/\/ Change how digit groups are formatted, and how many digits are shown after the decimal point\r\n  duration: 3000, \/\/ Change how long the javascript expects the CSS animation to take\r\n  theme: 'car', \/\/ Specify the theme (if you have more than one theme css file on the page)\r\n  animation: 'count' \/\/ Count is a simpler animation method which just increments the value,\r\n                     \/\/ use it when you're looking for something more subtle.\r\n};\r\n<\/pre>\n
Conclusion<\/h2>\n
For those who often present numerical information and would like to make it more eye-catching, Odometer is a good choice. Just take note that if you input anything other than a number,  the plugin won\u2019t work<\/strong>. Anyway, do give it a try and let us know what you think!<\/p>","protected":false},"excerpt":{"rendered":"
One of the effective ways to make a presentation of numerical information more interesting is by adding a transition animation. Creating a transition animation can be done with javascript, but the coding will take you a long time. For a quicker alternative, try Odometer. Odometer is a javascript plugin that can help you make your…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Create Smooth Numbers Transitioning For Your Site - Hongkiat<\/title>\n<meta name=\"description\" content=\"One of the effective ways to make a presentation of numerical information more interesting is by adding a transition animation. Creating a transition\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Smooth Numbers Transitioning For Your Site\" \/>\n<meta property=\"og:description\" content=\"One of the effective ways to make a presentation of numerical information more interesting is by adding a transition animation. Creating a transition\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-10T13:38:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/number-transitioning-odometer\/demo-result.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"How to Create Smooth Numbers Transitioning For Your Site\",\"datePublished\":\"2019-04-10T13:38:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/\"},\"wordCount\":392,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/number-transitioning-odometer\\\/demo-result.jpg\",\"keywords\":[\"Javascripts\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/\",\"name\":\"How to Create Smooth Numbers Transitioning For Your Site - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/number-transitioning-odometer\\\/demo-result.jpg\",\"datePublished\":\"2019-04-10T13:38:32+00:00\",\"description\":\"One of the effective ways to make a presentation of numerical information more interesting is by adding a transition animation. Creating a transition\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/number-transitioning-odometer\\\/demo-result.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/number-transitioning-odometer\\\/demo-result.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/number-transitioning-odometer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Smooth Numbers Transitioning For Your Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create Smooth Numbers Transitioning For Your Site - Hongkiat","description":"One of the effective ways to make a presentation of numerical information more interesting is by adding a transition animation. Creating a transition","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Smooth Numbers Transitioning For Your Site","og_description":"One of the effective ways to make a presentation of numerical information more interesting is by adding a transition animation. Creating a transition","og_url":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-04-10T13:38:32+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/number-transitioning-odometer\/demo-result.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"How to Create Smooth Numbers Transitioning For Your Site","datePublished":"2019-04-10T13:38:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/"},"wordCount":392,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/number-transitioning-odometer\/demo-result.jpg","keywords":["Javascripts"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/","url":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/","name":"How to Create Smooth Numbers Transitioning For Your Site - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/number-transitioning-odometer\/demo-result.jpg","datePublished":"2019-04-10T13:38:32+00:00","description":"One of the effective ways to make a presentation of numerical information more interesting is by adding a transition animation. Creating a transition","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/number-transitioning-odometer\/demo-result.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/number-transitioning-odometer\/demo-result.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/number-transitioning-odometer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Smooth Numbers Transitioning For Your Site"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-58X","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19775"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19775\/revisions"}],"predecessor-version":[{"id":47361,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19775\/revisions\/47361"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19775"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}