diff --git a/build.washingtonpost.com/docs/foundations/motion.mdx b/build.washingtonpost.com/docs/foundations/motion.mdx new file mode 100644 index 000000000..114d7a973 --- /dev/null +++ b/build.washingtonpost.com/docs/foundations/motion.mdx @@ -0,0 +1,458 @@ +--- +order: 13 +title: Motion +description: Color token values are defined by their context. There are two contexts we currently support a "light" and "dark" context. Toggle the sun/moon in the top right of the site to see each context. +--- + + + +Overview +Principles +Tokens + + + + +
+ +## Duration + +Duration controls how long an animation takes to complete, ranging from ultra-quick micro-interactions to longer, more elaborate transitions. +[View duration tokens.]() + +- **Quick Transitions** should use duration tokens between short and xxx-short. +- **Standard Animations** should use short and moderate duration tokens. +- **Complex Animations** should use duration tokens between moderate to xxx-long. + +
+ +--- + +## Transformation + +Tranform tokens provide precise control over how elements change positions, scale, or rotate during animations. [View transformation tokens.]() + +- **Fade** controls opacity for elements appearing (0% to 100%) or diappearing (100% to 0%). +- **Rotation** changes an element's orientation around its center point by specifying degrees of clockwise or counterclockwise rotation. +- **Scale** changes an element's size by adjusting its dimensions, either uniformly (maintaining proportions by adjusting both X and Y values) or non-uniformly (modifying width and height independently by adjusting X or Y values separately). +- **Slide** moves elements between positions, with elements either entering (slide-in) or exiting (slide-out) the screen. + +--- + +## Easing + +Easing functions define how animations progress over time, making movements feel more natural and engaging. [View ease tokens.]() + +- **Ease-in** starts slow and accelerates towards the end (like a car gaining speed), making them ideal for elements leaving the screen, fade-out animations, and objects falling due to gravity. +- **Ease-out** starts fast and decelerates towards the end (lie a car coming to a stop), and are ideal for elements entering the screen, pop-up menus and modals, fade-in animations, and objects falling due to gravity. +- **Ease-in-out** provides smooth transitions by starting slowly, accelerating in the middle, and decelerating at the end - making them perfect for state transitions, page changes, and complex UI interations that remain visible on screen. + + + + + +
+ +## Types of Motion + +In the dynamic world of news media, The Washington Post's motion design strategy leverages three distinct styles to engage audiences and deliver information effectively across various touch-points in the user experience. + +- **Motion in storytelling is dynamic and informative,** bringing narratives to life and enhancing reading experience and comprehension. It can also emphasize immediacy of breaking news reporting. +- **Motion in branding is expressive,** evoking emotion to create memorable experiences and strengthen the connection between the user and The Washington Post. Motion can also help to reinforce our personality and values. +- **Motion for engagement has a functional purpose,** such as guiding users attention, clarifying relationships between elements, streamlining interactions, reducing cognitive load, and maintaining predictable behavior across interfaces. + +
+ +--- + +## Guidance + +### Support motion preferences + +Enable users with vestibular disorders or motion sensitivity to customize their experience by including options to reduce or disable animations. + +### Ensure static alternatives are available + +Make sure users can access all information and functionality without requiring motion or animation elements. + +### Allow time for interaction + +Set appropriate animation durations to ensure users can fully comprehend and interact with moving elements before they change or disappear. + +### Respect user flow + +Animations should enhance rather than hinder the user experience by keeping interactive elements responsive and avoiding unnecessary delays in core functionality. + + + + +
+ +## Table of contents + +- [Duration](/foundations/motion#Duration) +- [Transformation](/foundations/motion#Font%20fade) +- [Transition](/foundations/motion#Font%20ease-in) + +--- + +## Duration + +Note: To enable animated preview, hover over shape. + +```jsx withPreview +export default function Example() { + return
Coded for duration example
; +} +``` + + + +
+ +--- + +## Fade + +Remember to pair transformation motion tokens with duration tokens for consistent timing. +Note: To enable animated preview, hover over shape. + +```jsx withPreview +export default function Example() { + return
Coded for duration example
; +} +``` + +
+ +
+ +--- + +## Rotation + +Remember to pair transformation motion tokens with duration tokens for consistent timing. +Note: To enable animated preview, hover over shape. + +```jsx withPreview +export default function Example() { + return
Coded for duration example
; +} +``` + +
+ +
+ +--- + +## Scale + +Remember to pair transformation motion tokens with duration tokens for consistent timing. +Note: To enable animated preview, hover over shape. + +```jsx withPreview +export default function Example() { + return
Coded for duration example
; +} +``` + +
+ +
+ +--- + +## Slide + +Remember to pair transformation motion tokens with duration tokens for consistent timing. +Note: To enable animated preview, hover over shape. + +```jsx withPreview +export default function Example() { + return
Coded for duration example
; +} +``` + +
+ +
+ +--- + +## Easing + +Remember to pair transition motion tokens with duration tokens for consistent timing. +Note: To enable animated preview, hover over shape. + +```jsx withPreview +export default function Example() { + return
Coded for duration example
; +} +``` + +
+ +
+ +--- + + + + + +
diff --git a/build.washingtonpost.com/public/sitemap.xml b/build.washingtonpost.com/public/sitemap.xml index ed26ba5b6..f1c93625f 100644 --- a/build.washingtonpost.com/public/sitemap.xml +++ b/build.washingtonpost.com/public/sitemap.xml @@ -152,6 +152,10 @@ https://build.washingtonpost.com/foundations/logos + + https://build.washingtonpost.com/foundations/motion + + https://build.washingtonpost.com/foundations/principles