- From: Nick Hubley via GitHub <noreply@w3.org>
- Date: Fri, 31 Oct 2025 12:49:10 +0000
- To: public-design-tokens-log@w3.org
I’ve been exploring motion tokens lately, and this discussion around duration made me think about how it could relate to transition.
In my experiments, pairing the two (duration for timing and transition for easing or delay) has worked well. It provides more clarity when defining motion across both design and code, and keeps things flexible for different interaction types.
```
{
"motion": {
// Duration tokens define how long an animation runs
"duration": {
"short": { "$type": "duration", "$value": 200 }, // micro-interactions
"medium": { "$type": "duration", "$value": 400 }, // standard UI transitions
"long": { "$type": "duration", "$value": 1000 } // larger or page-level motion
},
// Transition tokens describe the easing curve or motion behavior
"transition": {
"linear": {
"$type": "transition",
"$value": "linear" // constant speed — rarely used for natural motion
},
"ease-in": {
"$type": "transition",
"$value": "cubic-bezier(0.4, 0, 1, 1)" // accelerates quickly then stops
},
"ease-out": {
"$type": "transition",
"$value": "cubic-bezier(0, 0, 0.2, 1)" // decelerates smoothly
},
"ease-in-out": {
"$type": "transition",
"$value": "cubic-bezier(0.4, 0, 0.2, 1)" // balanced acceleration/deceleration
},
"gentle": {
"$type": "transition",
"$value": "cubic-bezier(0.4, 0, 0.23, 1.38)" // slightly elastic, feels organic
}
}
}
}
```
Mainly curious how duration and transition might work together in the motion spec moving forward.
--
GitHub Notification of comment by nubley
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/342#issuecomment-3472962659 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 31 October 2025 12:49:12 UTC