# Motion Why and how we use motion to help convey meaning in our UI. Tabs: [Overview](/design-tokens/motion/motion.overview.md) · [About](/design-tokens/motion/motion.about.md) · [Design](/design-tokens/motion/motion.design.md) · [Accessibility](/design-tokens/motion/motion.accessibility.md) · [Resources](/design-tokens/motion/motion.resources.md) ## Why is motion important? Motion can reduce cognitive load on users and help inform them about how to use Pleo, as well as making the product delightful to use. It can help with: - **Expectation.** Motion can reduce the gap between what a user expects might happen, and what actually happens. - **Continuity.** This can apply to how a user moves through a feature from end to end, and also to the consistency of the user's experience across the application. - **Narrative.** How a series of discreet moments or interactions can be linked together through motion to create a coherent story. - **Relationship.** Informing a user through motion about how components and interactions relate to each other, in order to guide their understanding and decision making. These guidelines aim to help you when creating motion for your components and features. But they might not be appropriate in every use case, so use your judgement when deciding what works best. ## Three factors The motion of an element should be determined by the **context** of the motion, the **size** of the element that is moving, and the **distance** that the element is travelling. ### Context An element can `enter`, move `within`, or `exit` the screen. This context affects both the duration and the easing that should be used for motion. #### Entering the screen Elements that `enter` the screen should use an `ease-out` curve. They should start fast and slow down as they reach their destination. They should also take longer to reach their destination than elements exiting the screen. A real world example is a [Drawer](/components/web/drawer/drawer.guidelines) opening. Toggle visibility #### Moving within the screen Elements that move `within` the screen should use an `ease-in-out` curve. They should start slow, speed up in the middle, and slow down again as they reach their destination. Their speeds sit in between entering and exiting elements. A real world example is a [Button](/components/web/button/button.guidelines) background changing on hover. Click me #### Exiting the screen Elements that `exit` the screen should use an `ease-in` curve. They should start slow and speed up as they leave the screen. It should furthermore take less time for an element to leave the screen than it should for an element to enter the screen. A real world example is a [Drawer](/components/web/drawer/drawer.guidelines) closing. Toggle visibility ### Size The size of the moving element should affect the duration of the motion. Larger elements (e.g a [Drawer](/components/web/drawer/drawer.guidelines)) should move slower than smaller elements (e.g a [Popover](/components/web/popover/popover.guidelines)). As a rough guideline, the motion of `large` elements affect the layout of the page (for example an [Accordion](/components/web/accordion/accordion.guidelines)) whilst a `small` element does not (for example a [Tooltip](/components/web/tooltip/tooltip.guidelines)). Change position ### Distance The distance that an element is moving should affect the duration of its motion. Elements that are travelling a `long` distance should move more slowly than elements that are travelling a `short` distance. An example of an element travelling a long distance is a [Drawer](/components/web/drawer/drawer.guidelines) component opening or closing, and an example of an element travelling a short distance is the "thumb" in a [Switch](/components/web/switch/switch.guidelines) component when toggling between off and on states. Change position ## Staggered animations If you have a collection of the same item all animating in at once, you may want to stagger the animations. For example, a list of items which are all entering the screen at the same time. Toggle visibility ## Direction Think about the direction of the motion as an element enters or exits the screen. For example, a list item should move up as it enters the screen, and down as it exits. Which direction you choose to animate in should ideally be based on the user's expectations and the context of where the element sits on the page. ## Don't go overboard Motion should be used to enhance the user experience, not to distract from it. It should be used sparingly and with purpose. Too much motion, or extreme animations, can make for a chaotic and overwhelming user experience.