Page MenuHomePhabricator

Rationalize how (CSS) animations & transitions are used
Open, MediumPublic

Description

Best Practices
”When animation is implemented into a design system, it's important to be consistent.”
”Keep animation consistent with your product. It's a physical system of laws.”

  • Decelerate (ease-out) human interactions
  • Accelerate (ease-in) system-initiated interactions
  • Fades and color-changes look best with more linear, subtle curves
  • Bounces increase animacy and add an air of "fun"
  • Longer durations for large(r) movements
  • Use ms as transition-duration standard unit value (internal engines use it)

Examples

Plan of action!

  • Integrate best practices in WikimediaUI Style Guide
  • Evaluate animations/transitions currently in use in (web) products

Event Timeline

Jaredzimmerman-WMF raised the priority of this task from to Needs Triage.
Jaredzimmerman-WMF updated the task description. (Show Details)
Jaredzimmerman-WMF changed Security from none to None.
Quiddity added a subscriber: Quiddity.
Volker_E triaged this task as Medium priority.Sep 23 2015, 7:50 AM
Volker_E renamed this task from Rationalize how animation is used to Rationalize how animation (& CSS transition) is used.Jan 23 2016, 12:21 AM

From my research, we should use very fast animations/transitions, outspoke 0.1s/100ms for all small interface changes (think link, button, focus et al transitions) and predominantely most bigger changes (think opening dialogs, resizing images…), as determined by human perception, "for having the user feel that the system is reacting instantaneously".

It's worth considering that ease-out animations/transitions are preferable over ease-in or ease-in-out values to provide users immediate starting feedback on their interactions. The [[ http://www.the-art-of-web.com/css/timing-function/ | default timing-function value ]] by browser vendors seems to be optimized with that in mind.

I recommend simply avoiding “ease-in” easing for timing functions on button-like elements. (From http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship)

Adding to the "default timing-function value" from above https://www.w3.org/TR/css3-transitions/#transition-timing-function-property

Default is ease
The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).

Volker_E renamed this task from Rationalize how animation (& CSS transition) is used to Rationalize how (CSS) animation & transitions are used.Feb 9 2016, 7:38 PM
Volker_E updated the task description. (Show Details)

From talk of R. Nabor's talk at Clarity Conf:

  • Decelerate (ease-out) human interactions
  • Accelerate (ease-in) system-initiated interactions
  • Fades and color-changes look best with more linear, subtle curves
  • Bounces increase animacy and add an air of "fun"

Longer durations for large(r) movements. And use ms instead of s, because the internals/engine use those anyway.

”When animation is implemented into a design system, it's important to be consistent.”
”Keep animation consistent with your product. It's a physical system of laws.”

As developer code (when coming from JS) is predominantly in milliseconds as the only native animation time unit there, it might be better to stick with ms in CSS.

Thanks @Volker_E, these seem like great insights!

Volker_E renamed this task from Rationalize how (CSS) animation & transitions are used to Rationalize how (CSS) animations & transitions are used.Aug 23 2017, 11:42 PM
Volker_E claimed this task.
Volker_E updated the task description. (Show Details)
Volker_E raised the priority of this task from Medium to Needs Triage.Aug 23 2017, 11:45 PM
Volker_E moved this task from Backlog to Researching… on the UI-Standardization-Kanban board.
Volker_E triaged this task as Medium priority.Jan 30 2018, 5:57 PM

Outcome of Wikimedia Design meeting on 2018-01-23: Make a proposal to add general usability recommendations around motion in a pull-request on Style Gudie and decide from there if we agree it's sufficient for v1.

Insights from testing options:
Focus state transitions with ease-out on OOUI input widgets resulted in a laggy feeling.
For human initiated opening dialogs where width is animated, ease-out seems like a good fit in contrast (and a better one than ease).

Volker_E updated the task description. (Show Details)Jan 9 2019, 5:31 PM
Aklapper removed Volker_E as the assignee of this task.Jun 19 2020, 4:26 PM
Aklapper removed a subscriber: Nirzar.

This task has been assigned to the same task owner for more than two years. Resetting task assignee due to inactivity, to decrease task cookie-licking and to get a slightly more realistic overview of plans. Please feel free to assign this task to yourself again if you still realistically work or plan to work on this task - it would be welcome!

For tips how to manage individual work in Phabricator (noisy notifications, lists of task, etc.), see https://phabricator.wikimedia.org/T228575#6237124 for available options.
(For the records, two emails were sent to assignee addresses before resetting assignees. See T228575 for more info and for potential feedback. Thanks!)