4 ms·

I love SMIL animations. If you're curious about what you can do, here's a few examples: https://www.pcmaffey.com/roll-your-own-analytics https://www.pcmaffey.c

I love SMIL animations. If you're curious about what you can do, here's a few examples: https://www.pcmaffey.com/roll-your-own-analytics https://www.pcmaffey.com/roll-your-own-analytics https://www.pcmaffey.com/finally-i-closed-my-linkedin https://www.pcmaffey.com/finally-i-closed-my-linkedin https://www.astronomer.io/404.html https://www.astronomer.io/404.html (let this play > 1 minute) You can open any of these images and View Source to dive in to the implementation... except for Edge, SMIL plays exactly the same in all browsers, whereas I've found using CSS to drive the animations has varied results (especially in Safari) and worse performance.

rchaud 7y ago
Very nice! I love the idea of small animations to dress up long-form articles, and we don't see it enough on the web because most "content" is written by content marketers and animations I guess are too time-intensive to be considered worthwhile. Could you tell us what the flow looks like? For example, what do you use to create the SVG, clean it up, and import it into SMIL and animate it there? Also, how much time would you say this process takes you?
- pcmaffey 7y ago
  Agreed! My process for creating something like this involves a few steps, but is pretty straightforward: 1. Draw vector art in Infinity Designer on my iPad (with pencil) 2. Export as svg, and then clean it up in Inkscape (simplify paths, finalize shapes, etc). 3. Export Inkscape svg and then optimize it with `svgo --pretty` 4. This results in nice clean svg code that I then hand edit to add the SMIL animations. This involves wrapping objects in <g> tags and adding mostly <animateTransforms>. Once you get a hang of the syntax (as with any kind of coding) it's relatively easy. 5. Final debugging / testing happens in the browser. Just open the file directly and use the dev tools inspector. Total time depends, from 2-3 hrs for a simple sketch and animation (eg. the LinkedIn one) to a day or 2 for something complex.

rchaud 7y ago

Very nice! I love the idea of small animations to dress up long-form articles, and we don't see it enough on the web because most "content" is written by content marketers and animations I guess are too time-intensive to be considered worthwhile. Could you tell us what the flow looks like? For example, what do you use to create the SVG, clean it up, and import it into SMIL and animate it there? Also, how much time would you say this process takes you?

pcmaffey 7y ago
Agreed! My process for creating something like this involves a few steps, but is pretty straightforward: 1. Draw vector art in Infinity Designer on my iPad (with pencil) 2. Export as svg, and then clean it up in Inkscape (simplify paths, finalize shapes, etc). 3. Export Inkscape svg and then optimize it with `svgo --pretty` 4. This results in nice clean svg code that I then hand edit to add the SMIL animations. This involves wrapping objects in <g> tags and adding mostly <animateTransforms>. Once you get a hang of the syntax (as with any kind of coding) it's relatively easy. 5. Final debugging / testing happens in the browser. Just open the file directly and use the dev tools inspector. Total time depends, from 2-3 hrs for a simple sketch and animation (eg. the LinkedIn one) to a day or 2 for something complex.