Tokens

Token nameCurrent valueFigma usageDescription
--p-motion-linear
cubic-bezier(0, 0, 1, 1)Set easing to LinearMoves with constant speed. Use for continuous and mechanical animations, such as rotating spinners.
--p-motion-ease-in-out
cubic-bezier(0.42, 0, 0.58, 1)Set custom bezier to 0.42, 0, 0.58, 1Starts and finishes with equal speed. A good default for transitions triggered by the system.
--p-motion-ease-out
cubic-bezier(0, 0, 0.58, 1)Set custom bezier to 0, 0, 0.58, 1Starts at top speed and finishes slowly. Use sparingly.
--p-motion-ease-in
cubic-bezier(0.42, 0, 1, 1)Set custom bezier to 0.42, 0, 1, 1Starts slowly and finishes at top speed. Use sparingly.
--p-motion-ease
cubic-bezier(0.25, 0.1, 0.25, 1)Set custom bezier to 0.25, 0.1, 0.25, 1Responds quickly and finishes with control. A great default for any user interaction.
--p-motion-duration-0
0msSet duration to 0 ms
--p-motion-duration-50
50msSet duration to 50 ms
--p-motion-duration-100
100msSet duration to 100 ms
--p-motion-duration-150
150msSet duration to 150 ms
--p-motion-duration-200
200msSet duration to 200 ms
--p-motion-duration-250
250msSet duration to 250 ms
--p-motion-duration-300
300msSet duration to 300 ms
--p-motion-duration-350
350msSet duration to 350 ms
--p-motion-duration-400
400msSet duration to 400 ms
--p-motion-duration-450
450msSet duration to 450 ms
--p-motion-duration-500
500msSet duration to 500 ms
--p-motion-duration-5000
5000msSet duration to 5000 ms
--p-motion-keyframes-bounce
{ from, 65%, 85% { transform: scale(1) } 75% { transform: scale(0.85) } 82.5% { transform: scale(1.05) } }
--p-motion-keyframes-fade-in
{ to { opacity: 1 } }
--p-motion-keyframes-pulse
{ from, 75% { transform: scale(0.85); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }
--p-motion-keyframes-spin
{ to { transform: rotate(1turn) } }
--p-motion-keyframes-appear-above
{ from { transform: translateY(var(--p-space-100)); opacity: 0; } to { transform: none; opacity: 1; } }
--p-motion-keyframes-appear-below
{ from { transform: translateY(calc(var(--p-space-100) * -1)); opacity: 0; } to { transform: none; opacity: 1; } }