{"id":1595,"date":"2016-05-23T13:42:40","date_gmt":"2016-05-23T11:42:40","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=1595"},"modified":"2016-05-23T15:16:05","modified_gmt":"2016-05-23T13:16:05","slug":"a-comparison-of-animation-technologies-css-tricks","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/a-comparison-of-animation-technologies-css-tricks\/","title":{"rendered":"A Comparison of Animation Technologies | CSS-Tricks"},"content":{"rendered":"<p>Source: <em><a href=\"https:\/\/css-tricks.com\/comparison-animation-technologies\/\">A Comparison of Animation Technologies | CSS-Tricks<\/a><\/em><\/p>\n<p>A really nice overview of pros and cons of current (2016) animation technologies. Some of the main points below. For detailed information, visit the link<\/p>\n<p><strong>Native animation<\/strong><\/p>\n<ul>\n<li><strong>CSS<\/strong><br \/>\n<em>pros: great performance, responsiveness.<br \/>\ncons: chaining multiple animations complicated, quirkiness in css+svg <\/em><\/li>\n<li><strong>Canvas<\/strong><br \/>\n<em>pros: really nice for interaction, good performance<br \/>\ncons: difficult to make accessible, difficult to make responsive, not retina-ready<\/em><\/li>\n<li><strong>SMIL<\/strong><br \/>\n<em>cons: losing support<\/em><\/li>\n<li><strong>Web Animations API<\/strong><br \/>\n<em>pros: Easy sequencing of animations, good performance<br \/>\n<\/em><em>cons: Support is not great, specs still changing<\/em><\/li>\n<li><strong>WebGL<\/strong><br \/>\n<em>pros: Really good in interactive and 3D effects, amazing visual effects, hardware-accelerated, VR-possibilities<\/em><br \/>\n<em>cons: Tougher to learn, hard to make responsive<\/em><\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p><strong>External libraries<\/strong><\/p>\n<ul>\n<li><strong>Greensock (GSAP)<\/strong><br \/>\n<em>pros: Extraordinarily performant (just as well as native), sequence tools (such as timeline) easy to understand, many plugins, <span style=\"text-decoration: underline;\">solves SVG cross-browser woes<\/span>, realistic eases<\/em>, <em>easy tweening, morph path data with an uneven amount of points<br \/>\ncons: pay if re-selling product to multiple users<\/em><\/li>\n<li><strong>VelocityJS<\/strong><br \/>\n<em>pros: chaining animations easier than CSS, easy to learn<br \/>\ncons: performance isn&#8217;t great, GSAP has more to offer, not actively maintained anymore (?)<\/em><\/li>\n<li><strong>jQuery<\/strong><br \/>\n<em>pros: most of the time this is already available, easy syntax, vs &gt; 3.0.0 has better performance than before<\/em><br \/>\n<em>cons: vs &lt; 3.0.0 not recommended due to perfomance, <span style=\"text-decoration: underline;\">animations aren&#8217;t supported on SVG in any version<\/span>, limited to DOM<\/em><\/li>\n<li><strong>Snap.svg<\/strong><br \/>\n<em>quote: &#8216;Snap is not an animation library and I always suggest to use it with GSAP when you need a serious animation.&#8217;<br \/>\n<strong>SnapFoo<\/strong> extends Snap&#8217;s realm to animation<\/em><\/li>\n<li><strong>Mo.js<\/strong><br \/>\n<em>Still in Beta, but very promising. <\/em><em>&#8216;The thing that excites me the most is how <strong>nicely malleable the easings are<\/strong> when you pass in SVG path data. Check out <a href=\"http:\/\/mojs.io\/tutorials\/easing\/path-easing\/\">how extensible<\/a> this is. It looks very promising and like a really good tool.&#8217;<\/em><\/li>\n<li><strong>Three.js<br \/>\n<\/strong><em>a beautiful three dimensional animation tool! Check out some of <a href=\"http:\/\/threejs.org\/\">these examples<\/a>. People usually talk about this and the native WebGL in tandem<\/em><\/li>\n<li><strong>Bodymovin&#8217;<br \/>\n<\/strong><em>meant for building animations in Adobe After Effects that you can export easily to SVG and JavaScript. Some of the demos are <a href=\"http:\/\/codepen.io\/airnan\/\">really impressive<\/a>. &#8216;I don\u2019t work with it because I really like building things from scratch with code (so this defeats the purpose for me), but if you\u2019re more of a designer than a developer, this tool would probably be really great for you. The only con I see to that part is that if you need to change it later, you\u2019d have to re-export it. That might be a weird workflow. Also, outputted code is usually kind of gross, but I haven\u2019t seen that effect the performance too much in the case of Bodymovin\u2019, so it\u2019s probably fine&#8217;<\/em><\/li>\n<\/ul>\n<h3 class=\"has-header-link\">React-Specific Workflows<\/h3>\n<p>React interacts with a <a href=\"https:\/\/facebook.github.io\/react\/docs\/glossary.html\">virtual DOM<\/a>, which is unlike the native browser DOM implementation.<\/p>\n<p>React uses a virtual DOM number of reasons, the most compelling of which is the ability to figure out what\u2019s changed and update only the pieces it needs to. <strong>This abstraction comes at a price<\/strong>, and some of the old tricks that you\u2019re used working with will give you trouble in a React environment. jQuery, for instance, will not play nice with React, being that it\u2019s primary function is to interact and manipulate with the browser\u2019s native DOM. I\u2019ve even seen some strange CSS race conditions.<\/p>\n<ul>\n<li>React-Motion<\/li>\n<li>GSAP in React<\/li>\n<li>CSS in React<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Source: A Comparison of Animation Technologies | CSS-Tricks A really nice overview of pros and cons of current (2016) animation technologies. Some of the main points below. For detailed information, visit the link Native animation CSS pros: great performance, responsiveness. cons: chaining multiple animations complicated, quirkiness in css+svg Canvas pros: really nice for interaction, good [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[109,7],"tags":[132,142,222,217,214,213,220,223,216,221,215,218,219],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/1595"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=1595"}],"version-history":[{"count":2,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/1595\/revisions"}],"predecessor-version":[{"id":1602,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/1595\/revisions\/1602"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=1595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=1595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=1595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}