Plan for v2 Motion Tokens

[sheelah]

What

We want to add support for "effects" style of motion in Canvas, now that we have our initial base and system tokens in place.

Why

We want to work towards a consistent approach to motion at Workday. Having the beginnings of "batteries-included" motion tooling available for developers will help us get there.

How

We want to add support for an "enter the screen" motion, by adding:

• "effects" system tokens to support this "enter" motion (more effects tokens could come later): system.motion.effect.enter-fade-up.*, to encourage proper pairing of easing and duration values matching our Canvas motion docs pairings](https://canvas.workday.com/styles/tokens/motion)
• An "enter the screen" motion component for React users, with smart defaults for this motion, but allowing for overrides via configurable parameters

Effects Tokens

• We'd add a couple new system motion tokens as "effects":
  • system.motion.effect.enter-fade-up.duration → expected to point to a base duration token like base.duration300
  • system.motion.effect.enter-fade-up.easing → expected to point to a system easing curve like system.motion.easing.purposeful.deceleration
• We'd use the existing opacity and gap tokens for declaring the motion's opacity and distance values, respectively

React Component

This "enter the screen" motion component will be added as a "labs" component. It will use the web animation API to implement a slide up and fade-in motion. It will include a default distance parameter for the slide motion (using our system gap tokens by default) which will also be configurable.

We'll use the Canvas Kit pattern of a model to allow for overrides of the default motion parameters.

We'll also include built-in support for "prefers reduced motion" in the component.

Pending feedback from users who uptake this component, we may add more motion "effects" components.

Notes

• Use of this motion effect will only be available to React users. The effects tokens will be available as regular Canvas tokens (therefore also available as CSS variables) but will not be very useful on their own.
• Use of the web animations API gives us more control over the animation, but it does mean that developers won't be able to see the animation in devtools styles or the devtools animation pane.

Questions

• Can system tokens point to other system tokens for their value? Ex. having an effect token reference a system easing token

[takashimokobe]

On your question about system tokens pointing to other system tokens - yes! I believe we do this for typography today (and perhaps depth). It seems like this would be a composite token, where the style is created by combining primitives.