{"id":993,"date":"2017-08-22T11:48:46","date_gmt":"2017-08-22T11:48:46","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=993"},"modified":"2018-12-04T05:31:40","modified_gmt":"2018-12-04T05:31:40","slug":"popmotion-javascript-motion-engine-for-animated-ui","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/popmotion-javascript-motion-engine-for-animated-ui\/","title":{"rendered":"Popmotion, Javascript Motion Engine for Animated UI"},"content":{"rendered":"<p>We seen an up-and-coming trend in design that will definitely bleed into 2016 for animation incorporated into UI. With the opposite trend of static websites emerging as well, some would argue otherwise. However, with the development of CSS3 and JavaScript, we see more and more developers embracing interactive animation in their programming. The development of clever little Javascript engines like&nbsp;<a href=\"http:\/\/popmotion.io\/\">Popmotion<\/a>, make it even easier for developers to create and innovative user interfaced using animation.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-32988\" src=\"https:\/\/i0.wp.com\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2.jpg?resize=970%2C485\" sizes=\"(max-width: 970px) 100vw, 970px\" srcset=\"https:\/\/i0.wp.com\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2.jpg?w=1143&amp;ssl=1 1143w, https:\/\/i0.wp.com\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2.jpg?resize=500%2C250&amp;ssl=1 500w, https:\/\/i0.wp.com\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2.jpg?resize=1024%2C512&amp;ssl=1 1024w, https:\/\/i0.wp.com\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2.jpg?resize=610%2C305&amp;ssl=1 610w\" alt=\"Popmotion2\" width=\"970\" height=\"485\"><\/p>\n<p>The motion engine has become popular on&nbsp;<a href=\"https:\/\/github.com\/Popmotion\/popmotion\">Github<\/a>, boasting abilities like animation, physics and input tracking; along with many more, like to following listed on the site:<\/p>\n<ul>\n<li>Input smoothing: Optionally smooth noisy data sources.<\/li>\n<li>Easy distribution: Available on npm, Bower, Meteor, or as a simple file-include.<\/li>\n<li>Low level: A single processing loop, open for low-level use.<\/li>\n<li><a href=\"https:\/\/watchjournal.com\/\">Watch<\/a>: Values can watch other values and do as they do, faster than recalculating.<\/li>\n<li>Complex number support: Colors, path definitions, matrix transforms and more.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-32986\" src=\"https:\/\/i0.wp.com\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-comparison.jpg?resize=732%2C536\" sizes=\"(max-width: 732px) 100vw, 732px\" srcset=\"https:\/\/i0.wp.com\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-comparison.jpg?w=732&amp;ssl=1 732w, https:\/\/i0.wp.com\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-comparison.jpg?resize=500%2C366&amp;ssl=1 500w, https:\/\/i0.wp.com\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-comparison.jpg?resize=610%2C447&amp;ssl=1 610w\" alt=\"Popmotion comparison\" width=\"732\" height=\"536\"><br \/>\nIf you are looking to get started with animation, check out their handy&nbsp;<a href=\"http:\/\/popmotion.io\/guides\/introduction-to-animation\">introduction to animation<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We seen an up-and-coming trend in design that will definitely bleed into 2016 for animation incorporated into UI. With the opposite trend of static websites emerging as well, some would argue otherwise. However, with the development of CSS3 and JavaScript, we see more and more developers embracing interactive animation in their programming. The development of [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":994,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,12],"tags":[93,94,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2018\/02\/Popmotion-1.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-g1","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/993"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=993"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/993\/revisions"}],"predecessor-version":[{"id":1605,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/993\/revisions\/1605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/994"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}