{"componentChunkName":"component---src-pages-guidelines-motion-basics-mdx","path":"/guidelines/motion/basics/","result":{"pageContext":{"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/basics.mdx","titleType":"prepend","MdxNode":{"id":"3179b806-53c2-5316-a5ba-8ebeb50d937f","children":[],"parent":"f23aa8c1-a293-5002-acb5-49466e1f121c","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\nimport { Tab } from 'carbon-components-react';\n\n<PageDescription>\n\nMotion can bring the screen to life, guide users through complex experiences,\nand help move them forward—from here to there, now to next, start to\nfinish—and make progress.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>Carbon in motion</AnchorLink>\n<AnchorLink>Style</AnchorLink>\n<AnchorLink>Easing</AnchorLink>\n<AnchorLink>Duration</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Motion Generator\"\n      href=\"https://ibm.github.io/motion/\"\n    />\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Motion Package\"\n      href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/motion\"\n    />\n  </Column>\n</Row>\n\n<br />\n<br />\n\n## Carbon in motion\n\n[Carbon components](../../components/overview/) have motion built in for\nmicrointeractions. However, the motion design of the overarching UI — that is,\nhow the components interact with each other and enter and exit the page itself —\nis up to each product team to implement. Use this guidance to customize,\ncombine, coordinate, and choreograph this aspect of motion in the UI.\n\n## Style\n\nCarbon recognizes different types of moments in users' experience and offers two\nstyles of motion—_productive_ motion, and _expressive_ motion. The motion curves\nare designed to reflect the duality of man and machine.\n\nProductivity and expression are both essential to an interface. Reserve\nexpressive motion for occasional, important moments, to better capture the\nuser’s attention and offer a rhythmic break to the productive experience.\n\n<Tabs>\n<Tab label=\"Curves\">\n<Row>\n<Column colSm={6} colMd={4} colLg={6}>\n<p>Productive</p>\n\n![Curve graphs representing differences between productive and expressive animation curves](images/Motion_overview_Curves_productive.svg)\n\n</Column>\n<Column colSm={6} colMd={4} colLg={6}>\n<p>Expressive</p>\n\n![Curve graphs representing differences between productive and expressive animation curves](images/Motion_overview_Curves_expressive.svg)\n\n</Column>\n\n</Row>\n\n</Tab>\n\n<Tab label=\"Abstract\">\n\n<Video vimeoId=\"310583009\" />\n\n</Tab>\n\n<Tab label=\"In-situ\">\n\n<Video vimeoId=\"310583036\" />\n\n</Tab>\n\n</Tabs>\n\n### Productive motion\n\nProductive motion creates a sense of efficiency and responsiveness, while remain\nsubtle and out of the way. Productive motion is appropriate for moments when the\nuser needs to focus on completing tasks. Microinteractions in Carbon such as\nbutton states, dropdowns, revealing additional information, or rendering data\ntables and visualizations were all designed with productive motion.\n\n### Expressive motion\n\nExpressive motion delivers enthusiastic, vibrant, and highly visible movement.\nUse expressive motion for significant moments such as opening a new page,\nclicking the primary action button, or when the movement itself conveys a\nmeaning. System alerts and the appearance of notification boxes are great cases\nfor expressive motion.\n\n<DoDontRow>\n<DoDont colLg={12} colMd={8} fullWidth caption=\"Productive moments are labeled in blue, and expressive moments are labeled in magenta.\">\n\n<Video vimeoId=\"310583077\" />\n\n</DoDont>\n</DoDontRow>\n\n## Easing\n\nStrictly linear movement appears unnatural to the human eye. Elements on the\nscreen should speed up quickly and slow down smoothly, obeying the physics of a\nlight-weight material. \"Easing curves\" describe the precise amount of\naccelerations in motion. We commonly use one of these three types of easing.\n\n<DoDontRow>\n<DoDont colLg={12} colMd={8} fullWidth caption=\"Elements on the screen speed up quickly and slow down smoothly, obeying the physics of a light-weight material.\">\n\n<Video vimeoId=\"310582370\" />\n\n</DoDont>\n</DoDontRow>\n\n<br />\n\nAvoid easing curves that are unnatural, distracting, or purely decorative. IBM\nmotion is essential and efficient, guiding users to value as quickly as\npossible.\n\n<DoDontRow>\n<DoDont colLg={12} colMd={8} type=\"dont\" fullWidth caption=\"Do not use easing curves that suggest bounce, stretch, or sudden stops.\">\n\n<Video vimeoId=\"310582418\" />\n\n</DoDont>\n</DoDontRow>\n\n### Standard easing\n\nUse `standard-easing` when an element is visible from the beginning to the end\nof a motion. Expanding tiles and the sorting of table rows are good examples.\n\n<Tabs>\n<Tab label=\"Curves\">\n<div>\n\n<Video vimeoId=\"310582611\" />\n\n</div>\n</Tab>\n<Tab label=\"Examples\">\n<div>\n\n<Video vimeoId=\"310582667\" />\n\n</div>\n</Tab>\n</Tabs>\n\n| Style      | IBM Motion package             | CSS                             | After Effects              |\n| ---------- | ------------------------------ | ------------------------------- | -------------------------- |\n| Productive | `motion(standard, productive)` | cubic-bezier(0.2, 0, 0.38, 0.9) | outgoing 20%, incoming 62% |\n| Expressive | `motion(standard, expressive)` | cubic-bezier(0.4, 0.14, 0.3, 1) | outgoing 40%, incoming 70% |\n\n### Entrance easing\n\nWith this style, an element quickly appears and slows down to a stop. Use\n`entrance-ease` when adding elements to the view, such as a modal or toaster\nappearing. Elements moving in response to the user's input, such as a dropdown\nopening or toggle switching should also use this style.\n\n<Tabs>\n<Tab label=\"Curves\">\n<div>\n\n<Video vimeoId=\"310582467\" />\n\n</div>\n</Tab>\n<Tab label=\"Examples\">\n<div>\n\n<Video vimeoId=\"310582503\" />\n\n</div>\n</Tab>\n</Tabs>\n\n| Style      | IBM Motion package             | CSS                           | After Effects             |\n| ---------- | ------------------------------ | ----------------------------- | ------------------------- |\n| Productive | `motion(entrance, productive)` | cubic-bezier(0, 0, 0.38, 0.9) | outgoing 0%, incoming 62% |\n| Expressive | `motion(entrance, expressive)` | cubic-bezier(0, 0, 0.3, 1)    | outgoing 0%, incoming 70% |\n\n### Exit easing\n\nUse `exit-easing` when removing elements from view, such as closing a modal or\ntoaster. The element speeds up as it exits from view, implying that its\ndeparture from the screen is permanent.\n\nAn exception to exits: if an element leaves the view but stays nearby, ready to\nreappear upon user action, use standard easing instead. A good example of this\nis a side panel. The panel leaves the view, but slows down as it exits, implying\nthat it would come to rest just outside the view, and ready to be recalled.\n\n<Tabs>\n<Tab label=\"Curves\">\n<div>\n\n<Video vimeoId=\"310582530\" />\n\n</div>\n</Tab>\n<Tab label=\"Examples\">\n<div>\n\n<Video vimeoId=\"310582574\" />\n\n</div>\n</Tab>\n</Tabs>\n\n| Style      | IBM motion package         | CSS                           | After Effects             |\n| ---------- | -------------------------- | ----------------------------- | ------------------------- |\n| Productive | `motion(exit, productive)` | cubic-bezier(0.2, 0, 1, 0.9)  | outgoing 20%, incoming 0% |\n| Expressive | `motion(exit, expressive)` | cubic-bezier(0.4, 0.14, 1, 1) | outgoing 40%, incoming 0% |\n\n### Summary on easing\n\nThe\n[IBM motion package](https://github.com/carbon-design-system/carbon-elements/tree/master/packages/motion)\nhas the easing curves stored for fast access. This is the recommended method to\ncall an easing curve and stay connected to receive any future updates.\n\n| Easing curve    | Productive                     | Expressive                     |\n| --------------- | ------------------------------ | ------------------------------ |\n| Standard easing | `motion(standard, productive)` | `motion(standard, expressive)` |\n| Entrance easing | `motion(entrance, productive)` | `motion(entrance, expressive)` |\n| Exit easing     | `motion(exit, productive)`     | `motion(exit, expressive)`     |\n\nIf you are unable to use the above method, cubic-bezier curve notation is the\nstandard way to express easing curves.\n\n| Easing curve    | Productive                      | Expressive                      |\n| --------------- | ------------------------------- | ------------------------------- |\n| Standard easing | cubic-bezier(0.2, 0, 0.38, 0.9) | cubic-bezier(0.4, 0.14, 0.3, 1) |\n| Entrance easing | cubic-bezier(0, 0, 0.38, 0.9)   | cubic-bezier(0, 0, 0.3, 1)      |\n| Exit easing     | cubic-bezier(0.2, 0, 1, 0.9)    | cubic-bezier(0.4, 0.14, 1, 1)   |\n\n## Duration\n\nDuration is calculated based on the style and size of the motion. Among the two\nmotion styles, productive motion is significantly faster than expressive motion.\nMotion’s duration should be dynamic based on the size of the animation; the\nlarger the change in distance (traveled) or size (scaling) of the element, the\nlonger the animation takes.\n\n<DoDontRow>\n<DoDont colLg={8} colMd={8} caption=\"Duration contrast between a taller and a shorter component.\">\n\n<Video vimeoId=\"310582312\" />\n\n</DoDont>\n</DoDontRow>\n\n<br />\n\nWhen custom duration is possible, please use the\n[Motion Generator](https://ibm.github.io/motion/) to get the customized duration\ncalculated for your element. Carbon uses a non-linear duration scale to achieve\nbetter perceived consistency across all distances.\n\n<Row className=\"resource-card-group\">\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Motion Generator\"\n      href=\"https://ibm.github.io/motion/\"\n    />\n  </Column>\n</Row>\n\n<br />\n\n### Duration tokens\n\nDynamic duration is an upcoming built-in feature for Carbon components and a\npart of the motion package. Currently, there are six static value tokens for\neasier implementation.\n\n| Token                   | Usage                                                         | Value |     |\n| ----------------------- | ------------------------------------------------------------- | ----- | --- |\n| `duration--fast-01`     | Micro-interactions such as button and toggle                  | 70ms  |     |\n| `duration--fast-02`     | Micro-interactions such as fade                               | 110ms |     |\n| `duration--moderate-01` | Micro-interactions, small expansion, short distance movements | 150ms |     |\n| `duration--moderate-02` | Expansion, system communication, toast                        | 240ms |     |\n| `duration--slow-01`     | Large expansion, important system notifications               | 400ms |     |\n| `duration--slow-02`     | Background dimming                                            | 700ms |     |\n","type":"Mdx","contentDigest":"f0359c9e12c5735c8f6408ba148cbb4a","counter":1663,"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\nimport { Tab } from 'carbon-components-react';\n\n<PageDescription>\n\nMotion can bring the screen to life, guide users through complex experiences,\nand help move them forward—from here to there, now to next, start to\nfinish—and make progress.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>Carbon in motion</AnchorLink>\n<AnchorLink>Style</AnchorLink>\n<AnchorLink>Easing</AnchorLink>\n<AnchorLink>Duration</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Motion Generator\"\n      href=\"https://ibm.github.io/motion/\"\n    />\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Motion Package\"\n      href=\"https://github.com/carbon-design-system/carbon/tree/master/packages/motion\"\n    />\n  </Column>\n</Row>\n\n<br />\n<br />\n\n## Carbon in motion\n\n[Carbon components](../../components/overview/) have motion built in for\nmicrointeractions. However, the motion design of the overarching UI — that is,\nhow the components interact with each other and enter and exit the page itself —\nis up to each product team to implement. Use this guidance to customize,\ncombine, coordinate, and choreograph this aspect of motion in the UI.\n\n## Style\n\nCarbon recognizes different types of moments in users' experience and offers two\nstyles of motion—_productive_ motion, and _expressive_ motion. The motion curves\nare designed to reflect the duality of man and machine.\n\nProductivity and expression are both essential to an interface. Reserve\nexpressive motion for occasional, important moments, to better capture the\nuser’s attention and offer a rhythmic break to the productive experience.\n\n<Tabs>\n<Tab label=\"Curves\">\n<Row>\n<Column colSm={6} colMd={4} colLg={6}>\n<p>Productive</p>\n\n![Curve graphs representing differences between productive and expressive animation curves](images/Motion_overview_Curves_productive.svg)\n\n</Column>\n<Column colSm={6} colMd={4} colLg={6}>\n<p>Expressive</p>\n\n![Curve graphs representing differences between productive and expressive animation curves](images/Motion_overview_Curves_expressive.svg)\n\n</Column>\n\n</Row>\n\n</Tab>\n\n<Tab label=\"Abstract\">\n\n<Video vimeoId=\"310583009\" />\n\n</Tab>\n\n<Tab label=\"In-situ\">\n\n<Video vimeoId=\"310583036\" />\n\n</Tab>\n\n</Tabs>\n\n### Productive motion\n\nProductive motion creates a sense of efficiency and responsiveness, while remain\nsubtle and out of the way. Productive motion is appropriate for moments when the\nuser needs to focus on completing tasks. Microinteractions in Carbon such as\nbutton states, dropdowns, revealing additional information, or rendering data\ntables and visualizations were all designed with productive motion.\n\n### Expressive motion\n\nExpressive motion delivers enthusiastic, vibrant, and highly visible movement.\nUse expressive motion for significant moments such as opening a new page,\nclicking the primary action button, or when the movement itself conveys a\nmeaning. System alerts and the appearance of notification boxes are great cases\nfor expressive motion.\n\n<DoDontRow>\n<DoDont colLg={12} colMd={8} fullWidth caption=\"Productive moments are labeled in blue, and expressive moments are labeled in magenta.\">\n\n<Video vimeoId=\"310583077\" />\n\n</DoDont>\n</DoDontRow>\n\n## Easing\n\nStrictly linear movement appears unnatural to the human eye. Elements on the\nscreen should speed up quickly and slow down smoothly, obeying the physics of a\nlight-weight material. \"Easing curves\" describe the precise amount of\naccelerations in motion. We commonly use one of these three types of easing.\n\n<DoDontRow>\n<DoDont colLg={12} colMd={8} fullWidth caption=\"Elements on the screen speed up quickly and slow down smoothly, obeying the physics of a light-weight material.\">\n\n<Video vimeoId=\"310582370\" />\n\n</DoDont>\n</DoDontRow>\n\n<br />\n\nAvoid easing curves that are unnatural, distracting, or purely decorative. IBM\nmotion is essential and efficient, guiding users to value as quickly as\npossible.\n\n<DoDontRow>\n<DoDont colLg={12} colMd={8} type=\"dont\" fullWidth caption=\"Do not use easing curves that suggest bounce, stretch, or sudden stops.\">\n\n<Video vimeoId=\"310582418\" />\n\n</DoDont>\n</DoDontRow>\n\n### Standard easing\n\nUse `standard-easing` when an element is visible from the beginning to the end\nof a motion. Expanding tiles and the sorting of table rows are good examples.\n\n<Tabs>\n<Tab label=\"Curves\">\n<div>\n\n<Video vimeoId=\"310582611\" />\n\n</div>\n</Tab>\n<Tab label=\"Examples\">\n<div>\n\n<Video vimeoId=\"310582667\" />\n\n</div>\n</Tab>\n</Tabs>\n\n| Style      | IBM Motion package             | CSS                             | After Effects              |\n| ---------- | ------------------------------ | ------------------------------- | -------------------------- |\n| Productive | `motion(standard, productive)` | cubic-bezier(0.2, 0, 0.38, 0.9) | outgoing 20%, incoming 62% |\n| Expressive | `motion(standard, expressive)` | cubic-bezier(0.4, 0.14, 0.3, 1) | outgoing 40%, incoming 70% |\n\n### Entrance easing\n\nWith this style, an element quickly appears and slows down to a stop. Use\n`entrance-ease` when adding elements to the view, such as a modal or toaster\nappearing. Elements moving in response to the user's input, such as a dropdown\nopening or toggle switching should also use this style.\n\n<Tabs>\n<Tab label=\"Curves\">\n<div>\n\n<Video vimeoId=\"310582467\" />\n\n</div>\n</Tab>\n<Tab label=\"Examples\">\n<div>\n\n<Video vimeoId=\"310582503\" />\n\n</div>\n</Tab>\n</Tabs>\n\n| Style      | IBM Motion package             | CSS                           | After Effects             |\n| ---------- | ------------------------------ | ----------------------------- | ------------------------- |\n| Productive | `motion(entrance, productive)` | cubic-bezier(0, 0, 0.38, 0.9) | outgoing 0%, incoming 62% |\n| Expressive | `motion(entrance, expressive)` | cubic-bezier(0, 0, 0.3, 1)    | outgoing 0%, incoming 70% |\n\n### Exit easing\n\nUse `exit-easing` when removing elements from view, such as closing a modal or\ntoaster. The element speeds up as it exits from view, implying that its\ndeparture from the screen is permanent.\n\nAn exception to exits: if an element leaves the view but stays nearby, ready to\nreappear upon user action, use standard easing instead. A good example of this\nis a side panel. The panel leaves the view, but slows down as it exits, implying\nthat it would come to rest just outside the view, and ready to be recalled.\n\n<Tabs>\n<Tab label=\"Curves\">\n<div>\n\n<Video vimeoId=\"310582530\" />\n\n</div>\n</Tab>\n<Tab label=\"Examples\">\n<div>\n\n<Video vimeoId=\"310582574\" />\n\n</div>\n</Tab>\n</Tabs>\n\n| Style      | IBM motion package         | CSS                           | After Effects             |\n| ---------- | -------------------------- | ----------------------------- | ------------------------- |\n| Productive | `motion(exit, productive)` | cubic-bezier(0.2, 0, 1, 0.9)  | outgoing 20%, incoming 0% |\n| Expressive | `motion(exit, expressive)` | cubic-bezier(0.4, 0.14, 1, 1) | outgoing 40%, incoming 0% |\n\n### Summary on easing\n\nThe\n[IBM motion package](https://github.com/carbon-design-system/carbon-elements/tree/master/packages/motion)\nhas the easing curves stored for fast access. This is the recommended method to\ncall an easing curve and stay connected to receive any future updates.\n\n| Easing curve    | Productive                     | Expressive                     |\n| --------------- | ------------------------------ | ------------------------------ |\n| Standard easing | `motion(standard, productive)` | `motion(standard, expressive)` |\n| Entrance easing | `motion(entrance, productive)` | `motion(entrance, expressive)` |\n| Exit easing     | `motion(exit, productive)`     | `motion(exit, expressive)`     |\n\nIf you are unable to use the above method, cubic-bezier curve notation is the\nstandard way to express easing curves.\n\n| Easing curve    | Productive                      | Expressive                      |\n| --------------- | ------------------------------- | ------------------------------- |\n| Standard easing | cubic-bezier(0.2, 0, 0.38, 0.9) | cubic-bezier(0.4, 0.14, 0.3, 1) |\n| Entrance easing | cubic-bezier(0, 0, 0.38, 0.9)   | cubic-bezier(0, 0, 0.3, 1)      |\n| Exit easing     | cubic-bezier(0.2, 0, 1, 0.9)    | cubic-bezier(0.4, 0.14, 1, 1)   |\n\n## Duration\n\nDuration is calculated based on the style and size of the motion. Among the two\nmotion styles, productive motion is significantly faster than expressive motion.\nMotion’s duration should be dynamic based on the size of the animation; the\nlarger the change in distance (traveled) or size (scaling) of the element, the\nlonger the animation takes.\n\n<DoDontRow>\n<DoDont colLg={8} colMd={8} caption=\"Duration contrast between a taller and a shorter component.\">\n\n<Video vimeoId=\"310582312\" />\n\n</DoDont>\n</DoDontRow>\n\n<br />\n\nWhen custom duration is possible, please use the\n[Motion Generator](https://ibm.github.io/motion/) to get the customized duration\ncalculated for your element. Carbon uses a non-linear duration scale to achieve\nbetter perceived consistency across all distances.\n\n<Row className=\"resource-card-group\">\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Motion Generator\"\n      href=\"https://ibm.github.io/motion/\"\n    />\n  </Column>\n</Row>\n\n<br />\n\n### Duration tokens\n\nDynamic duration is an upcoming built-in feature for Carbon components and a\npart of the motion package. Currently, there are six static value tokens for\neasier implementation.\n\n| Token                   | Usage                                                         | Value |     |\n| ----------------------- | ------------------------------------------------------------- | ----- | --- |\n| `duration--fast-01`     | Micro-interactions such as button and toggle                  | 70ms  |     |\n| `duration--fast-02`     | Micro-interactions such as fade                               | 110ms |     |\n| `duration--moderate-01` | Micro-interactions, small expansion, short distance movements | 150ms |     |\n| `duration--moderate-02` | Expansion, system communication, toast                        | 240ms |     |\n| `duration--slow-01`     | Large expansion, important system notifications               | 400ms |     |\n| `duration--slow-02`     | Background dimming                                            | 700ms |     |\n","fileAbsolutePath":"/zeit/3f757860/src/pages/guidelines/motion/basics.mdx"}}}}