Skip to content
Telescope

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 elementLarge element
Short distancemotionEnterSmallShortmotionEnterLargeShort
Long distancemotionEnterSmallLongmotionEnterLargeLong

within motion tokens

Small elementLarge element
Short distancemotionWithinSmallShortmotionWithinLargeShort
Long distancemotionWithinSmallLongmotionWithinLargeLong

exit motion tokens

Small elementLarge element
Short distancemotionExitSmallShortmotionExitLargeShort
Long distancemotionExitSmallLongmotionExitLargeLong

Hover the examples to see the motion in action.

TokenValueExample
motionWithinSmallShort0.12s ease-in-out
motionWithinSmallLong0.24s ease-in-out
motionWithinLargeShort0.12s ease-in-out
motionWithinLargeLong0.36s ease-in-out
motionEnterSmallShort0.24s ease-out
motionEnterSmallLong0.36s ease-out
motionEnterLargeShort0.36s ease-out
motionEnterLargeLong0.48s ease-out
motionExitSmallShort0.12s ease-in
motionExitSmallLong0.24s ease-in
motionExitLargeShort0.24s ease-in
motionExitLargeLong0.36s ease-in

Usage

import {tokens} from '@pleo-io/telescope'


const element = styled.div`
    transition: all ${tokens.motionExitLargeShort};
`