Motion
We use motion to help convey meaning in our user interfaces.
Motion tokens
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. You can read more about how we use motion in our Motion Guidelines.
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 |
Usage
import {tokens} from '@pleo-io/telescope'const element = styled.div`transition: all ${tokens.motionExitLargeShort};`