{"id":32984,"date":"2015-11-27T13:30:39","date_gmt":"2015-11-27T20:30:39","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=32984"},"modified":"2015-11-27T11:21:43","modified_gmt":"2015-11-27T18:21:43","slug":"popmotion-javascript-motion-engine-for-animated-ui","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/popmotion-javascript-motion-engine-for-animated-ui\/","title":{"rendered":"Popmotion, Javascript Motion Engine for Animated UI"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">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 <\/span><a href=\"http:\/\/popmotion.io\/\"><span style=\"font-weight: 400;\">Popmotion<\/span><\/a><span style=\"font-weight: 400;\">, make it even easier for developers to create and innovative user interfaced using animation. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32987 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion-1.jpg\" alt=\"Popmotion 1\" width=\"1045\" height=\"473\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-1.jpg 1045w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-1-500x226.jpg 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-1-1024x463.jpg 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-1-610x276.jpg 610w\" data-sizes=\"(max-width: 1045px) 100vw, 1045px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1045px; --smush-placeholder-aspect-ratio: 1045\/473;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32987\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion-1.jpg\" alt=\"Popmotion 1\" width=\"1045\" height=\"473\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-1.jpg 1045w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-1-500x226.jpg 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-1-1024x463.jpg 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion-1-610x276.jpg 610w\" sizes=\"(max-width: 1045px) 100vw, 1045px\" \/><\/noscript> <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32988 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion2.jpg\" alt=\"Popmotion2\" width=\"1143\" height=\"571\" data-srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2.jpg 1143w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2-500x250.jpg 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2-1024x512.jpg 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2-610x305.jpg 610w\" data-sizes=\"(max-width: 1143px) 100vw, 1143px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1143px; --smush-placeholder-aspect-ratio: 1143\/571;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32988\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion2.jpg\" alt=\"Popmotion2\" width=\"1143\" height=\"571\" srcset=\"https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2.jpg 1143w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2-500x250.jpg 500w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2-1024x512.jpg 1024w, https:\/\/webdesignledger.com\/wp-content\/uploads\/2015\/11\/Popmotion2-610x305.jpg 610w\" sizes=\"(max-width: 1143px) 100vw, 1143px\" \/><\/noscript><\/p>\n<p><span style=\"font-weight: 400;\">The motion engine has become popular on <\/span><a href=\"https:\/\/github.com\/Popmotion\/popmotion\"><span style=\"font-weight: 400;\">Github<\/span><\/a><span style=\"font-weight: 400;\">, boasting abilities like animation, physics and input tracking; along with many more, like to following listed on the site:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Input smoothing: Optionally smooth noisy data sources.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Easy distribution: Available on npm, Bower, Meteor, or as a simple file-include.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Low level: A single processing loop, open for low-level use.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Watch: Values can watch other values and do as they do, faster than recalculating.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Complex number support: Colors, path definitions, matrix transforms and more.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32986 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion-comparison.jpg\" alt=\"Popmotion comparison\" width=\"732\" height=\"536\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion-comparison.jpg 732w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion-comparison-500x366.jpg 500w\" data-sizes=\"(max-width: 732px) 100vw, 732px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 732px; --smush-placeholder-aspect-ratio: 732\/536;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-32986\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion-comparison.jpg\" alt=\"Popmotion comparison\" width=\"732\" height=\"536\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion-comparison.jpg 732w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2015\/11\/Popmotion-comparison-500x366.jpg 500w\" sizes=\"(max-width: 732px) 100vw, 732px\" \/><\/noscript><br \/>\n<span style=\"font-weight: 400;\">If you are looking to get started with animation, check out their handy <\/span><a href=\"http:\/\/popmotion.io\/guides\/introduction-to-animation\"><span style=\"font-weight: 400;\">introduction to animation<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/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":1825,"featured_media":32985,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[490,31],"tags":[16,160,428,40,8135,4287,8134],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/32984"}],"collection":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/users\/1825"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/comments?post=32984"}],"version-history":[{"count":0,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/32984\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media\/32985"}],"wp:attachment":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media?parent=32984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/categories?post=32984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/tags?post=32984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}