250116 - New motion tokens

[ratinsl]

Description

We are introducing our first set of motion tokens! The purpose of these tokens is for us to reference how and when to use motion, as well as what specific tokens to use for motion behaviors across the experience to support a variety of upcoming projects and frameworks. They are split up into two sections consisting of easing and duration.

Once tokens are available, it will allow us to reference them for components, patterns, and transitions across platforms.

Here is the playbook motion tokens page. Please note, we are still working on adding the token motion.duration.instant to this page.

Motion Easing Tokens:

• motion.easing.standard - (.3, 0, 0, 1)
• motion.easing.quick.enter - (0, 0, 0, 1)
• motion.easing.quick.exit - (1, 0 ,0, 1)
• motion.easing.soft.enter - (0, 0, .7, 1)
• motion.easing.soft.exit - (.3, 0, 1, 1)
• motion.easing.continuous - (.3, 0, .7, 1)
• motion.easing.bounce - (.3, 0, 0, 1.5)
• motion.easing.linear - (0, 0, 1, 1)

Motion Duration Tokens:

• motion.duration.instant - (17ms)
• motion.duration.short.1 - (50ms)
• motion.duration.short.2 - (83ms)
• motion.duration.short.3 - (167ms)
• motion.duration.medium.1 - (250ms)
• motion.duration.medium.2 - (333ms)
• motion.duration.medium.3 - (500ms)
• motion.duration.long.1 - (667ms)
• motion.duration.long.2 - (883ms)
• motion.duration.long.3 - (1000ms)

Please let us know if you have any questions!

Screenshots

Figma link

https://www.figma.com/deck/ggTEkD3yjJlfvip0WkB0qh/Motion-in-product-list?node-id=1-58&viewport=-39%2C-32%2C0.56&t=0W95VOzT2iQIYCJE-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1

Engineering pre-requisites

• Successful design review with Design System Team.
• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).
• Successful accessibility review with Core A11Y Team.
• Successful frontend review with eBayUI Team.

[agliga]

Can we have another column which specifies the timing function used for each of the values?

[ratinsl]

@agliga we'll chat more about this in next week's DS/Web sync and learn more on how we can improve the specs!

[ArtBlue]

@ratinsl , during the intake of this issue, we agreed to be explicit about the timing function to be super clear what they were and to reduce the redundancy during implementation and usage, so we'll be formatting the easing tokens like this pattern instead of just the numbers inside parentheses:

motion-easing-standard: cubic-bezier(.3, 0, 0, 1)

[ArtBlue]

Unblocked. I spoke with Ryan. We will either be changing the token value usage in DS at some point in the future or the translation mechanism to send the token values in cubic-bezier(.3, 0, 0, 1) format. That's TBD, so we don't have to worry about that at the moment.