Skip to main content

Motion

Motion tokens in our design system are integral for defining the timing of animations and transitions in our user interface. Each token specifies the duration for 'enter' and 'exit' motions, creating a smooth and responsive user experience. By standardizing these values, we ensure consistent and intuitive animations across our application, enhancing the feel of interactivity and flow.

VariableValue
--ty-sys-motion-duration-enter300ms
--ty-sys-motion-duration-exit250ms
--ty-sys-motion-duration-enter-fast250ms
--ty-sys-motion-duration-exit-fast200ms
--ty-sys-motion-duration-enter-faster200ms
--ty-sys-motion-duration-exit-faster150ms