Page and element transition animations

[niqjohnson]

Lots of the interfaces we're making lately have some kind of animated transition in them, but I don't think we have any standards around those animations. Some examples I've noticed recently:

• The animated page scroll to the top of the graph after you hit "Get your estimates" in Planning for Retirement
• A similar animated page scroll when you use the "scroll back up" link about halfway down the page in the OaH monthly payment worksheet
• The revealing answers in Step 2 of Planning for Retirement
• Opening and closing of expandables

I'm sure there are plenty of others I haven't seen, too.

I'd be in favor of setting some broad standards around these kinds of page and element transitions to start, like:

• Should we do these kinds of animiated transitions at all? If so, which ones?
• What are the specific settings for each kind of transtion (e.g. timing and easing)?
• How do we make sure these transitions are accessible for all types of users?

From there, maybe we can turn some of the more globally applicable transitions into their own design manual elements as needed (like smoothly scrolling a page).