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 performance
cons: difficult to make accessible, difficult to make responsive, not retina-ready - SMIL
cons: losing support - Web Animations API
pros: Easy sequencing of animations, good performance
cons: Support is not great, specs still changing - WebGL
pros: Really good in interactive and 3D effects, amazing visual effects, hardware-accelerated, VR-possibilities
cons: Tougher to learn, hard to make responsive
External libraries
- Greensock (GSAP)
pros: Extraordinarily performant (just as well as native), sequence tools (such as timeline) easy to understand, many plugins, solves SVG cross-browser woes, realistic eases, easy tweening, morph path data with an uneven amount of points
cons: pay if re-selling product to multiple users - VelocityJS
pros: chaining animations easier than CSS, easy to learn
cons: performance isn’t great, GSAP has more to offer, not actively maintained anymore (?) - jQuery
pros: most of the time this is already available, easy syntax, vs > 3.0.0 has better performance than before
cons: vs < 3.0.0 not recommended due to perfomance, animations aren’t supported on SVG in any version, limited to DOM - Snap.svg
quote: ‘Snap is not an animation library and I always suggest to use it with GSAP when you need a serious animation.’
SnapFoo extends Snap’s realm to animation - Mo.js
Still in Beta, but very promising. ‘The thing that excites me the most is how nicely malleable the easings are when you pass in SVG path data. Check out how extensible this is. It looks very promising and like a really good tool.’ - Three.js
a beautiful three dimensional animation tool! Check out some of these examples. People usually talk about this and the native WebGL in tandem - Bodymovin’
meant for building animations in Adobe After Effects that you can export easily to SVG and JavaScript. Some of the demos are really impressive. ‘I don’t work with it because I really like building things from scratch with code (so this defeats the purpose for me), but if you’re 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’d have to re-export it. That might be a weird workflow. Also, outputted code is usually kind of gross, but I haven’t seen that effect the performance too much in the case of Bodymovin’, so it’s probably fine’
React-Specific Workflows
React interacts with a virtual DOM, which is unlike the native browser DOM implementation.
React uses a virtual DOM number of reasons, the most compelling of which is the ability to figure out what’s changed and update only the pieces it needs to. This abstraction comes at a price, and some of the old tricks that you’re used working with will give you trouble in a React environment. jQuery, for instance, will not play nice with React, being that it’s primary function is to interact and manipulate with the browser’s native DOM. I’ve even seen some strange CSS race conditions.
- React-Motion
- GSAP in React
- CSS in React