Skip to main contenteBay Playbook

Motion tokens

Our motion tokens define the timing and easing values used in transitions and animations. Use them instead of custom motion values to create more consistent, cohesive interactions across experiences.

Duration

TitleValue
motion.duration.instant
17ms
motion.duration.short.1
50ms
motion.duration.short.2
83ms
motion.duration.short.3
167ms
motion.duration.medium.1
250ms
motion.duration.medium.2
333ms
motion.duration.medium.3
500ms
motion.duration.long.1
667ms
motion.duration.long.2
833ms
motion.duration.long.3
1000ms

Easing

TitleValue
motion.easing.standard
cubic-bezier(0.3, 0, 0, 1)
motion.easing.quick.enter
cubic-bezier(0, 0, 0, 1)
motion.easing.quick.exit
cubic-bezier(1, 0, 1, 1)
motion.easing.soft.enter
cubic-bezier(0, 0, 0.7, 1)
motion.easing.soft.exit
cubic-bezier(0.3, 0, 1, 1)
motion.easing.continuous
cubic-bezier(0.3, 0, 0.7, 1)
motion.easing.bounce
cubic-bezier(0.3, 0, 0, 1.25)
motion.easing.linear
cubic-bezier(0, 0, 1, 1)

Resources