{"componentChunkName":"component---src-pages-guidelines-motion-choreography-mdx","path":"/guidelines/motion/choreography/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Motion","description":"Motion can bring the screen to life, guide users through complex experiences, and help move them forward—from here to there, now to next, start to finish—and make progress.","tabs":["Basics","Choreography","Resources"]},"relativePagePath":"/guidelines/motion/choreography.mdx","titleType":"prepend","MdxNode":{"id":"4b387e24-1b01-5e7b-a778-8f7b2b810ce4","children":[],"parent":"3f699616-2050-5026-8b95-02bdac5529b7","internal":{"content":"---\ntitle: Motion\ndescription: Motion can bring the screen to life, guide users through complex experiences, and help move them forward—from here to there, now to next, start to finish—and make progress.\ntabs: ['Basics', 'Choreography', 'Resources']\n---\n\n<AnchorLinks>\n\n<AnchorLink>Paths</AnchorLink>\n<AnchorLink>Composition</AnchorLink>\n\n</AnchorLinks>\n\n## Paths\n\nElements in Carbon dance on the grid. Motion paths trace lines along the grid which never run diagonally.\n\n<DoDontExample type=\"do\" caption=\"When expanding or moving elements across the screen, stagger the timing of horizontal and vertical animations to create a path with a rounded corner.\">\n\n<Video vimeoId=\"310582887\" />\n\n</DoDontExample>\n\n<br />\n\n<DoDontExample caption=\"Not staggering horizontal and vertical animations create a straight diagonal path. It breaks the grid and is harsh to the eye.\">\n\n<Video vimeoId=\"310582699\" />\n\n</DoDontExample>\n\n<br />\n\n<Row>\n<Column colLg={4} colMd={4}>\n<DoDontExample type=\"do\" aspectRatio=\"1:1\" caption=\"When removing an item from the grid, thumbnails on the edge existing and re-entering container create a smooth transition.\">\n\n<Video vimeoId=\"310582738\" />\n\n</DoDontExample>\n</Column>\n<Column colLg={4} colMd={4} >\n<DoDontExample  aspectRatio=\"1:1\" caption=\"Thumbnails moving on diagonal paths feels sporadic and harsh.\">\n\n<Video vimeoId=\"310582775\" />\n\n</DoDontExample>\n</Column>\n</Row>\n\n<br />\n\n<Row>\n<Column colLg={4} colMd={4}>\n<DoDontExample aspectRatio=\"1:1\" type=\"do\" caption=\"When sorting or shuffling items on the grid, always using rounded corner paths to visually organize the movements.\">\n\n<Video vimeoId=\"310582816\" />\n\n</DoDontExample>\n</Column>\n<Column colLg={4} colMd={4} >\n<DoDontExample aspectRatio=\"1:1\" caption=\"Criss cross sorting appears disorganized. Avoid this motion path.\">\n\n<Video vimeoId=\"310582851\" />\n\n</DoDontExample>\n</Column>\n</Row>\n\n## Composition\n\nWhen multiple animated elements coexist or interact with each other within the same view, it is vital to make the many moving elements work together and form a coherent experience, to better provide way-finding and focus.\n\n### Consistency\n\n#### Semantic consistency\n\nWhen elements convey the same meaning or perform the same function, use the same motion for them, and vice-versa. This helps to reinforce the meaning behind a movement and improves the user’s proficiency using the interface.\n\nIn the example below, both expanding a row of a data table and opening a dropdown use a chevron and share a similar intent—to reveal content hidden in a seam. Therefore, they should use the same motion style (productive) and easing (entrance, standard). However, they should use slightly different durations due to their difference in size.\n\n<DoDontExample type=\"do\" caption=\"Comparing data table expansion and dropdown\">\n\n<Video vimeoId=\"310581970\" />\n\n</DoDontExample>\n\n<br />\n\n#### Spatial consistency\n\nPay attention to the spatial relationships between elements and screens, and information hierarchy. Visually similar elements may need the different motions to clarify their respective spatial locations.\n\n<DoDontExample type=\"do\" caption=\"When the new content panel is on a higher layer, motion is “sliding”, moving content within with the panel.  Also always dim the content below when new layer is introduced above.\">\n\n<Video vimeoId=\"310581999\" />\n\n</DoDontExample>\n\n<br />\n\n<DoDontExample type=\"do\" caption=\"When the new content panel is on the same layer, motion is “pushing”, revealing content within with a mask.\">\n\n<Video vimeoId=\"310582064\" />\n\n</DoDontExample>\n\n<br />\n\n#### Intentional inconsistency\n\nConscientious use of inconsistency in motion highlights a difference in meaning or intent behind actions with similar visual appearance. Usually, forward motion in the direction of entrance signals affirmation, while reversing entrance motion signals cancellation.\n\n<Row>\n<Column colLg={4} colMd={4}>\n<DoDontExample aspectRatio=\"1:1\" type=\"do\" caption=\"Use motion to reinforce meaning. Affirmative action here triggers a different exit motion for the modal than negation.\">\n\n<Video vimeoId=\"310582134\" />\n\n</DoDontExample>\n</Column>\n<Column colLg={4} colMd={4} >\n<DoDontExample aspectRatio=\"1:1\">\n\n<Video vimeoId=\"310582167\" />\n\n</DoDontExample>\n</Column>\n</Row>\n\n### Continuity\n\nMotion can help establish a sense of continuity between screens and experiences. Pay attention to shared elements across screens, such as title panels or buttons, to create a graceful transition.\n\n<DoDontExample type=\"do\" caption=\"Shared elements can effectively guide users through a multi-layered information architecture.\">\n\n<Video vimeoId=\"310582206\" />\n\n</DoDontExample>\n\n<br />\n\n<DoDontExample caption=\"Continuous elements are for guidance and should not distract. Always finish a sequence with the important content on page.\">\n\n<Video vimeoId=\"310582279\" />\n\n</DoDontExample>\n\n### Sequence and stagger\n\nWhen multiple elements need to animate, distribute their entrances over time instead of introducing everything at once. This will help the user understand the content and orientation.\n\nFor example, staggering the entrance of table content by 20 ms significantly reduces the cognitive load. Depending on the number of staggered elements, the delay should be adjusted to ensure that total time is still within 500 ms.\n\n<DoDontExample type=\"do\" caption=\"Table with rows loading in at staggered timing.\">\n\n<Video vimeoId=\"310582972\" />\n\n</DoDontExample>\n\n<br />\n\nSequence the loading of page content when possible. Start with the most stable content, such as static content and header, and end with the most important information, such as the primary button or a calculation result, to focus the user’s attention on them.\n\n<DoDontExample type=\"do\" caption=\"Sequencing of this interface prioritizes the primary button, and reserves data visualization for later when users begin to scroll, indicating intention to dive deeper.\">\n\n<Video vimeoId=\"310582919\" />\n\n</DoDontExample>\n\n<br />\n\nFollow this recommended sequence of different types of content when choreographing content entrance. Not all categories will be present in every experience.\n\n| Seq | Category              | Examples                                             |\n| --- | --------------------- | ---------------------------------------------------- |\n| 1   | Static content        | UI shell, top and side navigation                    |\n| 2   | Static content (body) | Headers, written content, images                     |\n| 3   | Dynamic content       | Content of a data table, query results from database |\n| 4   | Primary action        | Primary action button                                |\n| 5   | Animated content      | Data visualizations                                  |\n","type":"Mdx","contentDigest":"fd7f9b63f8a42edca1c9afbe35a80757","counter":1416,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Motion","description":"Motion can bring the screen to life, guide users through complex experiences, and help move them forward—from here to there, now to next, start to finish—and make progress.","tabs":["Basics","Choreography","Resources"]},"exports":{},"rawBody":"---\ntitle: Motion\ndescription: Motion can bring the screen to life, guide users through complex experiences, and help move them forward—from here to there, now to next, start to finish—and make progress.\ntabs: ['Basics', 'Choreography', 'Resources']\n---\n\n<AnchorLinks>\n\n<AnchorLink>Paths</AnchorLink>\n<AnchorLink>Composition</AnchorLink>\n\n</AnchorLinks>\n\n## Paths\n\nElements in Carbon dance on the grid. Motion paths trace lines along the grid which never run diagonally.\n\n<DoDontExample type=\"do\" caption=\"When expanding or moving elements across the screen, stagger the timing of horizontal and vertical animations to create a path with a rounded corner.\">\n\n<Video vimeoId=\"310582887\" />\n\n</DoDontExample>\n\n<br />\n\n<DoDontExample caption=\"Not staggering horizontal and vertical animations create a straight diagonal path. It breaks the grid and is harsh to the eye.\">\n\n<Video vimeoId=\"310582699\" />\n\n</DoDontExample>\n\n<br />\n\n<Row>\n<Column colLg={4} colMd={4}>\n<DoDontExample type=\"do\" aspectRatio=\"1:1\" caption=\"When removing an item from the grid, thumbnails on the edge existing and re-entering container create a smooth transition.\">\n\n<Video vimeoId=\"310582738\" />\n\n</DoDontExample>\n</Column>\n<Column colLg={4} colMd={4} >\n<DoDontExample  aspectRatio=\"1:1\" caption=\"Thumbnails moving on diagonal paths feels sporadic and harsh.\">\n\n<Video vimeoId=\"310582775\" />\n\n</DoDontExample>\n</Column>\n</Row>\n\n<br />\n\n<Row>\n<Column colLg={4} colMd={4}>\n<DoDontExample aspectRatio=\"1:1\" type=\"do\" caption=\"When sorting or shuffling items on the grid, always using rounded corner paths to visually organize the movements.\">\n\n<Video vimeoId=\"310582816\" />\n\n</DoDontExample>\n</Column>\n<Column colLg={4} colMd={4} >\n<DoDontExample aspectRatio=\"1:1\" caption=\"Criss cross sorting appears disorganized. Avoid this motion path.\">\n\n<Video vimeoId=\"310582851\" />\n\n</DoDontExample>\n</Column>\n</Row>\n\n## Composition\n\nWhen multiple animated elements coexist or interact with each other within the same view, it is vital to make the many moving elements work together and form a coherent experience, to better provide way-finding and focus.\n\n### Consistency\n\n#### Semantic consistency\n\nWhen elements convey the same meaning or perform the same function, use the same motion for them, and vice-versa. This helps to reinforce the meaning behind a movement and improves the user’s proficiency using the interface.\n\nIn the example below, both expanding a row of a data table and opening a dropdown use a chevron and share a similar intent—to reveal content hidden in a seam. Therefore, they should use the same motion style (productive) and easing (entrance, standard). However, they should use slightly different durations due to their difference in size.\n\n<DoDontExample type=\"do\" caption=\"Comparing data table expansion and dropdown\">\n\n<Video vimeoId=\"310581970\" />\n\n</DoDontExample>\n\n<br />\n\n#### Spatial consistency\n\nPay attention to the spatial relationships between elements and screens, and information hierarchy. Visually similar elements may need the different motions to clarify their respective spatial locations.\n\n<DoDontExample type=\"do\" caption=\"When the new content panel is on a higher layer, motion is “sliding”, moving content within with the panel.  Also always dim the content below when new layer is introduced above.\">\n\n<Video vimeoId=\"310581999\" />\n\n</DoDontExample>\n\n<br />\n\n<DoDontExample type=\"do\" caption=\"When the new content panel is on the same layer, motion is “pushing”, revealing content within with a mask.\">\n\n<Video vimeoId=\"310582064\" />\n\n</DoDontExample>\n\n<br />\n\n#### Intentional inconsistency\n\nConscientious use of inconsistency in motion highlights a difference in meaning or intent behind actions with similar visual appearance. Usually, forward motion in the direction of entrance signals affirmation, while reversing entrance motion signals cancellation.\n\n<Row>\n<Column colLg={4} colMd={4}>\n<DoDontExample aspectRatio=\"1:1\" type=\"do\" caption=\"Use motion to reinforce meaning. Affirmative action here triggers a different exit motion for the modal than negation.\">\n\n<Video vimeoId=\"310582134\" />\n\n</DoDontExample>\n</Column>\n<Column colLg={4} colMd={4} >\n<DoDontExample aspectRatio=\"1:1\">\n\n<Video vimeoId=\"310582167\" />\n\n</DoDontExample>\n</Column>\n</Row>\n\n### Continuity\n\nMotion can help establish a sense of continuity between screens and experiences. Pay attention to shared elements across screens, such as title panels or buttons, to create a graceful transition.\n\n<DoDontExample type=\"do\" caption=\"Shared elements can effectively guide users through a multi-layered information architecture.\">\n\n<Video vimeoId=\"310582206\" />\n\n</DoDontExample>\n\n<br />\n\n<DoDontExample caption=\"Continuous elements are for guidance and should not distract. Always finish a sequence with the important content on page.\">\n\n<Video vimeoId=\"310582279\" />\n\n</DoDontExample>\n\n### Sequence and stagger\n\nWhen multiple elements need to animate, distribute their entrances over time instead of introducing everything at once. This will help the user understand the content and orientation.\n\nFor example, staggering the entrance of table content by 20 ms significantly reduces the cognitive load. Depending on the number of staggered elements, the delay should be adjusted to ensure that total time is still within 500 ms.\n\n<DoDontExample type=\"do\" caption=\"Table with rows loading in at staggered timing.\">\n\n<Video vimeoId=\"310582972\" />\n\n</DoDontExample>\n\n<br />\n\nSequence the loading of page content when possible. Start with the most stable content, such as static content and header, and end with the most important information, such as the primary button or a calculation result, to focus the user’s attention on them.\n\n<DoDontExample type=\"do\" caption=\"Sequencing of this interface prioritizes the primary button, and reserves data visualization for later when users begin to scroll, indicating intention to dive deeper.\">\n\n<Video vimeoId=\"310582919\" />\n\n</DoDontExample>\n\n<br />\n\nFollow this recommended sequence of different types of content when choreographing content entrance. Not all categories will be present in every experience.\n\n| Seq | Category              | Examples                                             |\n| --- | --------------------- | ---------------------------------------------------- |\n| 1   | Static content        | UI shell, top and side navigation                    |\n| 2   | Static content (body) | Headers, written content, images                     |\n| 3   | Dynamic content       | Content of a data table, query results from database |\n| 4   | Primary action        | Primary action button                                |\n| 5   | Animated content      | Data visualizations                                  |\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/guidelines/motion/choreography.mdx"}}}}