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