Motion Tokens
Use motion tokens to set the length and easing of transitions.
Duration
{
"motion": {
"duration": {
"quick": {
"value": 200,
"comment": "For quick visual feedback without delay",
"use": "Micro interactions - Buttons, toggle, form field responses"
},
"standard": {
"value": 300,
"comment": "Balances perceptibilty with efficiency",
"use": "Common UI transitions e.g. Panel expansions, notifications etc"
},
"expressive": {
"value": 500,
"comment": "Page transitions or complex sequences",
"use": "Page transitions, Modals, Data visualisation"
},
"expressivePlus": {
"value": 700,
"comment": "For complex, multi-stage animations like onboarding sequences",
"use": "Use sparingly to highlight significant moments in the customer journey"
}
}
}
}
Easing
{
"motion": {
"easing": {
"oStandard": {
"value": "cubic-bezier(0.33, 0.00, 0.67, 1.00)",
"comment": "Smooth, balanced transition with equal acceleration and deceleration."
},
"oEnter": {
"value": "cubic-bezier(0.17, 0.67, 0.83, 1.00)",
"comment": "Creates emphasis at the end with a quick start"
},
"oExit": {
"value": "cubic-bezier(0.33, 0.00, 0.83, 0.33)",
"comment": "Creates emphasis at the beginning with a quick finish"
},
"vStandard": {
"value": "cubic-bezier(0.33, 0.00, 0.10, 1.00)",
"comment": "Major state changes and transitions"
},
"vSharp": {
"value": "cubic-bezier(0.40, 0.00, 0.75, 0.35)",
"comment": "Large elements exiting or transitioning out"
},
"vPower": {
"value": "cubic-bezier(0.05, 0.45, 0.25, 1.00)",
"comment": "Large elements entering or transitioning in"
}
}
}
}
Presets
// Preset examples
"presets": {
"hover": {
"duration": "300ms",
"easing": "cubic-bezier(0.33, 0.00, 0.67, 1.00)",
"scale": {
"from": "100%",
"to": "110%"
},
"comment": "Interactive hover states with scale effect"
},
"active": {
"duration": "200ms",
"easing": "cubic-bezier(0.33, 0.00, 0.67, 1.00)",
"scale": {
"from": "100%",
"to": "95%"
},
"comment": "Active/pressed states with scale down effect"
},
"toggleSwitch": {
"duration": "200ms",
"easing": "cubic-bezier(0.33, 0.00, 0.67, 1.00)",
"transform": {
"from": "-10px",
"to": "10px"
},
"color": {
"from": "#635E58",
"to": "#1F3BCD"
},
"comment": "Toggle switch transition with position and color change"
},
"bottomSheetEnter": {
"duration": "300ms",
"easing": "cubic-bezier(0.05, 0.45, 0.25, 1.00)",
"transform": {
"from": "406px",
"to": "180px"
},
"comment": "Bottom sheet enter animation with v_power easing"
},
"bottomSheetExit": {
"duration": "300ms",
"easing": "cubic-bezier(0.40, 0.00, 0.75, 0.35)",
"transform": {
"from": "180px",
"to": "406px"
},
"comment": "Bottom sheet exit animation with v_sharp easing"
},
"modal": {
"duration": "300ms",
"easing": "cubic-bezier(0.05, 0.45, 0.25, 1.00)",
"comment": "Modal enter using v_power easing"
},
"toast": {
"duration": "500ms",
"easing": "cubic-bezier(0.05, 0.45, 0.25, 1.00)",
"comment": "Toast notifications with bounce"
},
"page-transition": {
"duration": "500ms",
"easing": "cubic-bezier(0.33, 0.00, 0.10, 1.00)",
"comment": "Page-to-page navigation using V Standard easing"
}
},
"delays": {
"none": {
"value": "0ms",
"comment": "No delay"
},
"short": {
"value": "100ms",
"comment": "Brief delay for sequential animations"
},
"medium": {
"value": "200ms",
"comment": "Moderate delay for staggered effects"
},
"long": {
"value": "300ms",
"comment": "Longer delay for dramatic effect"
}
},
"stagger": {
"items": {
"value": "50ms",
"comment": "Delay between list items animating"
},
"cards": {
"value": "75ms",
"comment": "Delay between card animations"
},
"elements": {
"value": "25ms",
"comment": "Small delay for element sequences"
}
}