How to best spec animations/transitions for engineering team handoff

Question

I have an app prototype built using Pixate which demonstrates the entire flow of the app I am working on. There are transitions between views and animations for certain elements on the page. I have shown the prototype to the engineers who are working on the project but they would like a detailed breakdown of what transitions and animations I am using. How would I best communicate these animations in a spec document? Are there any resources or tools to help with animation specs?

(Here is a catch, all of the engineers are using either Linux or Windows machines, whereas I am using a mac. So the solution should be a cross-platform one.)

Since animation is becoming more prevalent in app design, especially in Material Design, I thought this would be an easy question Google search could answer, but no luck. Any help would be amazing. Thank you in advance.

Aaron J.

Answer 1

There are times when you need to create specs for animations and for those times it is recommended to write the animation in sentences. You can create your own shorthand for communicating your animations to the developers.

Rachel Nabors, an animator was interviewed on the UIE Podcast. She suggests writing sentences for your animations.

"I tend to write out my animations with a formula that goes you list the trailing event, the thing that’s being animated, the property. How long the animation lasts, and what your easing is. That would be on load the width goes from 25 percent to 100 percent using easing over 300 milliseconds. That’s the way I write it out in documentation. It makes sense to front-end developers and it’s still legible for designers as well." - Rachel Nabors

Link to podcast: UIE: Rachel Nabors – Using Animation to Enhance Your UX

Here is another example of annotating animations from Simon Pan's Amazon Prime Music case study:

As you can see this annotation is very detailed and would be very helpful for the developers.

So you can definitely combine the actual animation with a specific animation annotation which can be visual or written out as a sentence for the times when you have to provide a document to the developers.

Answer 2

How would I best communicate these animations in a spec document?

You can't. It's an oxymoron. The best way to communicate animations is to show the animations, as you've done.

Any documentation that tries to explain animation is already once-removed from the source. Plus, there's just no way to actually document all the intricacies that go into it.

It's like making a movie. You can write the script. You can create the storyboards. You can rehearse. But at the end of the day, what comes out at the end is never 100% match to all the documentation you created. Why? Things change. Organizations need to learn to accept that and 'go with the flow' rather than forcing UX teams to become documentation factories.

In some organizations, developers have become accustomed to having everything written out for them. That's just a bad habit that hopefully you can help break.

I'd suggest a document that simply says:

Make the animation behave like the animation in the prototype.

And then work with the side-by-side as much as you can.

Now, perhaps you do have some of the details already...like you know it's a .5s fade. Those you can document. You can do that in an email easy enough.

Answer 3

First I recommend you to use Framer.js for complete freedom in animation. It is code based prototyping tool for mobile.

Making prototypes is most effective way I've ever experinced while passing app specs to developers/clients. Just simply forward your framer source file to developers they can figure out whats going on there.

note: I not promoter of framer.js, just pro user.