Change Details

**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** - [[ https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less$206 | WikimediaUI Base – default transitions for use across our products ]] - OOUI implementation **Plan of action!** [] Integrate best practices in WikimediaUI Style Guide [] Evaluate animations/transitions currently in use in (web) products

==== 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 - [[ https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less$206 | WikimediaUI Base – default transitions for use across our products ]] - OOUI implementation ==== Plan of action! [] Integrate best practices in Wikimedia Design Style Guide [] Evaluate animations/transitions currently in use in (web) products --- ==== Further resources https://www.joshwcomeau.com/animation/css-transitions/

**==== 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** - [[ https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less$206 | WikimediaUI Base – default transitions for use across our products ]] - OOUI implementation **==== Plan of action!** [] Integrate best practices in WikimediaUI Design Style Guide [] Evaluate animations/transitions currently in use in (web) products --- ==== Further resources https://www.joshwcomeau.com/animation/css-transitions/