We use motion to enhance interactions, provide feedback, and create a sense of continuity.
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.
The three factors mentioned above are combined to create motion tokens. For example, motionExitLargeShort is the motion token for elements that are exiting the screen, are large in size, and are moving a short distance.
You can use the grids below to find the right motion token.
enter motion tokens
| Small element | Large element | |
|---|---|---|
| Short distance | motionEnterSmallShort | motionEnterLargeShort |
| Long distance | motionEnterSmallLong | motionEnterLargeLong |
within motion tokens
| Small element | Large element | |
|---|---|---|
| Short distance | motionWithinSmallShort | motionWithinLargeShort |
| Long distance | motionWithinSmallLong | motionWithinLargeLong |
exit motion tokens
| Small element | Large element | |
|---|---|---|
| Short distance | motionExitSmallShort | motionExitLargeShort |
| Long distance | motionExitSmallLong | motionExitLargeLong |
Information:
Hover the examples to see the motion in action.
| Token | Value | Example |
|---|---|---|
motionWithinSmallShort | 0.12s ease-in-out | |
motionWithinSmallLong | 0.24s ease-in-out | |
motionWithinLargeShort | 0.12s ease-in-out | |
motionWithinLargeLong | 0.36s ease-in-out | |
motionEnterSmallShort | 0.24s ease-out | |
motionEnterSmallLong | 0.36s ease-out | |
motionEnterLargeShort | 0.36s ease-out | |
motionEnterLargeLong | 0.48s ease-out | |
motionExitSmallShort | 0.12s ease-in | |
motionExitSmallLong | 0.24s ease-in | |
motionExitLargeShort | 0.24s ease-in | |
motionExitLargeLong | 0.36s ease-in |