$type: "cubicBezier"
primitive
Cubic Bezier Token
Cubic bezier tokens define a custom easing curve for animations and transitions. The $value must be an array of exactly 4 numbers representing the x and y coordinates of two control points: [P1x, P1y, P2x, P2y]. This maps directly to the CSS cubic-bezier() timing function. P1x and P2x must be in the range [0, 1].
Value Format
An array of exactly 4 numbers: [P1x, P1y, P2x, P2y]
When to Use
Use cubic bezier tokens to codify your motion personality — ease-in for exits, ease-out for entrances, and custom spring-like curves for interactive elements. Paired with duration tokens, they form a complete motion vocabulary.
Valid Example
Valid JSON .json
{
"easing": {
"standard": {
"$value": [0.4, 0, 0.2, 1],
"$type": "cubicBezier",
"$description": "Material Design standard easing"
},
"decelerate": {
"$value": [0, 0, 0.2, 1],
"$type": "cubicBezier"
},
"accelerate": {
"$value": [0.4, 0, 1, 1],
"$type": "cubicBezier"
}
}
} Paste the example above into the validator to test it yourself.
Open Validator