interaction design animations style guide

Question

I'm trying to come up with a standard set of animations for each interaction of an e-commerce web site i'm working on. This is a project that's after on a style guide project(something similar to http://rizzo.lonelyplanet.com/styleguide/) it makes sense to do this since things like ui patterns and visual styles on the website will have a sense of consistency after the style guide project is complete.

how can i get about extending the style guide to cover interaction design as well as micro interactions? I'm looking for any examples or references and trying to wrap my head around what would be a good starting point.

for now i'm trying to build off the following approach

e.g.
Menus
on hover in - expand down
on hover out - expand up

item in cart
added- fade + zoom in
delete- fade + zoom out

text box (validation)
input correct - outline transforms to green
input incorrect - outline transforms to red

what's the best approach to coming up with something that's coherent could be used with each when stakeholders or product managers when conceptualising new features.

Answer 1

You can take a hint from the IBM animation style guide. They've divided it into four sections:

1. Basics - This determines the essential qualities of how objects animate.
2. Style - How you can apply machine motion to your elements like Menus and Lists. I think this section meets your requirements. You can extend it to add your own interface elements.
3. Time - To determine pace and personality of animation. Like ease-in, ease-out, etc
4. Rationale - This shows how animation can enhance UX.

Hope this helps!