Live Animation Specs

Isn’t it strange that we go to great lengths to make our animations just right, but then have no easy way to share it with engineers who will actually build this?

The challenge is — how do we share ‘moving’ data in a ‘static’ document? While thinking about this, I realised that the idea of a static document was actually a self imposed constraint. Mitya is already exporting an interactive HTML prototype. Why not just use the same prototype to display the animation data right next to it?

And that’s what Live Animation Specs does. As you navigate through the prototype, the spec data will automatically be updated to stay in sync with the current screen. Engineers can now see the animation and get the specs for that animation — right from the same screen. They’re going to love you for this :)

Since the spec data is a part of the prototype, there’s no overhead for you to maintain the documentation either — just export and you’ll have the latest specs.

How to use Animation Specs:
Export your prototype using File | Export. Mitya will now create two HTML files
1. <filename>.html: This is the regular HTML prototype.
2. <filename> Specs.html: This file has two iframes: one for the prototype and one for the spec data. When you navigate the prototype on the left iframe, the spec data on the right will update automatically

Hope you enjoy using this. Your engineers surely will! ;)