Skip to content

Instantly share code, notes, and snippets.

@sfoster
Last active July 5, 2018 20:40
Show Gist options
  • Save sfoster/1027580d5115c8279d0e4b38fc8f0ed0 to your computer and use it in GitHub Desktop.
Save sfoster/1027580d5115c8279d0e4b38fc8f0ed0 to your computer and use it in GitHub Desktop.
SVG Animation Tooling / Firefox Photon Notes

Many of the new UI animations added in 57 used a "film strip" technique to get pre-rendered, 60fps animation that could run entirely on the compositor and off the main thread. These SVG files were typically a horizontal strip of frames, each frame offset on the x-axis by frame index * frame width. To play the animation, the CSS transform property is updated to translateX to a value that places the current frame at 0,0 in a cropped element. This technique is explained and illustrated here: http://msuja.ws/svg.html

There are many ways to create and optimize the output assets for these animations. The toolchain we used was a mix of existing tools and custom scripts and processes:

Asset preparation process

  • Adobe After Effects + BodyMovin
    • The framing and motion design was doine in After Effects, and exported using the BodyMovin plugin to a SVG-as-json format.
  • This page imports this json data, creates a SVG document and plays the animation in order to generate the static frames. The output can be saved from the browser.
  • SVGO was used to optimize these rather bloaty documents down to a more appropriate size. A series of custom svgo plugins helped in some cases to post-process and further optimize particular features of the output from this process, e.g. removing -moz-select style attributes, removing redundant xmlns attributes, adding a license comment etc. These plugins are available in a fork of the SVGO repo here. The repo includes a sample config file. Usage like so:
./bin/svgo --config=photon.config --input=path/to/bloaty.svg --output=path/to/optimized.svg

Copy photon.default.config from that repo to e.g. photon.config. Include/exclude plugins and adjust the order they run in by editing photon.config

  • Optional and occasional manual optimization. Some files benefited from some manual editing. We didn't reach a turn-key solution to just drop input in and get clean output out. Most config tweaks converged around the params for the convertPathData plugin: adjusting rounding precision, etc.

Notes

In the time available, we did not find a hands-off, push-button series of steps that would reliably preserve the integrity of the paths while also doing an adequate job of removing bloat and un-needed detail. Each animation run through this process needed to be verified manually to ensure the conversion was successful. Sometimes the plugins config needed tweaking, in some cases some manual optimization was applied.

Colors and context-fill/stroke

57/Photon also marked a large move to SVG and use of the context-fill and context-stroke attribute values to leverage a single asset across platforms and themes. As context-* is not supported in content, another tool was written (slapped together) to make it easier to examine and prepare these SVG files. This provides a way of listing out all the color values in a given SVG image, and assigning one or more to be replace with the magic "context-fill" or "context-stroke" value. The result can be previewed, and saved out from the browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment