Animation comparisons.
A brief study into animation technologies for the web. Check out this more in-depth article here.
A brief study into animation technologies for the web. Check out this more in-depth article here.
Simple SVG-only animation
For simple loaders I think this is a great technology. The bugbear is IE & Edge as there is no support for either browser yet &, although Chrome do support it they did deprecate it at one point. The markup controls the movement, no CSS or JS involvement at all.
Pros: Great performance, nice workflow - export your SVG code directly from sketch or illustrator clean it up with SVGOMG. Add in your animation rules and away you go.
Cons: Markup is pretty hideous, it's good to use the <object /> tag for SVGs to keep them clean. Potentially deprecated technology, although there are some discussions whether to keep it.
Using transitions to spin vector graphics
This seems to be the most preferred and recommended way to create animations. And using keyframes does give you access to much more complicated animations.
Pros: Just as performant as SVG SMIL. Keyframes are more commonly used that SMIL so there are much more resources online.
Cons: I find keyframes quite cumbersome and easy to get out of hand with more complex animations.
I dislike the canvas element
The <canvas /> is an all round bad guy. So much to learn and for what? A rasterized rectangle with no possibility of debugging (in Chrome)?
Pros: Fair enough, the performance is brilliant.
Cons: It's really hard. Rasterizing is a step backwards (although I realise this is not the use case for using the canvas).