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:
- 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.
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.
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.