Transition type feedback

[c1rrus]

Is the transition composite type fit for purpose? Are these transitions parameters by themselves useful considering that they don't let you specify what aspect of a UI is being transitioned and what the start and end states are?

Please share your feedback, thoughts and ideas in this issue.

[CITguy]

Issue 1: timingFunction name

The value of timingFunction is not a function (JSON doesn't have functions). It's a Cubic Beziér curve definition, so I'd be more inclined to call it timingCurve or easingCurve to better reflect its actual value. However, with issue 2 (below), maybe call it easing, such that it would support any acceptable easing definition (whether cubic beziér, linear, or stepped).

Issue 2: acceptable timingFunction values

Looking at CSS Easing Functions Level 1, there are 3 different classes of easing functions:

1. "linear"
   • less common than Cubic Beziér, but probably more common than step easing
   • same as [0, 0, 1, 1] (Cubic Beziér)
2. Cubic Beziér
   • likely the most common to be used
3. Step easing
   • cannot be described in Cubic Beziér form
   • likely the least common

Issue 3: optional vs required properties

See #179, for partial composite token definition.

Questions

1. Do design tools recognize CSS easing keywords (ease, ease-in, ease-out, ease-in-out, and linear)?
   1. If so, to they use the same curve definition as defined by CSS?
2. Do design tools provide additional or alternate keywords?
   1. If so, how common are their definitions between other design tools?

[PavelLaptev]

@CITguy most design tools have types ease, ease-in, ease-out, ease-in-out, and linear. But the problem here could be their different implementation, so ease-in numbers in one tool could be different in another.

The name timingFunction not correct here, because it allows to use only bezier with only 4 points [p0, p1, p2, p3].

It means that we can't use sprint, bounce or elastic animations or make custom curves, because they have more points. In CSS we can achieve that using animation @keyframes.

We can define which ease type we want to use, for example we have this list of ease types:

• ease
• ease-in
• ease-out
• ease-in-out
• spring-in
• spring-out
• spring-in-out
• bounce-in
• bounce-out
• bounce-in-out
• etc …
• custom

and with this custom type we can define the value

custom spring animation

{
      "$type": "transition",
      "$value": {
        "duration": string,
        "delay": string,
        "timingFunction": {
           "$type": "custom",
           "$value": "0,0,C0.29,0,0.294,0.018,0.365,0.103,0.434,0.186,0.466,0.362,0.498,0.502,0.518,0.592,0.552,0.77,0.615,0.864,0.69,0.975,0.704,1,1,1"
         }
      }
}

default spring animation

{
      "$type": "transition",
      "$value": {
        "duration": string,
        "delay": string,
        "timingFunction": {
           "$type": "spring",
           "$value": "default"
         }
      }
}
``

or we can rename timingFunction to cubic-bezier

{
  "transition": {
    "emphasis": {
      "$type": "transition",
      "$value": {
        "duration": "200ms",
        "delay": "0ms",
        "cubic-bezier": [0.5, 0, 1, 1]
      }
    }
  }
}

here are some refs Easing Docs from Android and ease visualizer from GSAP JS

what do you think?

[lukasoppermann]

I also run into the issue that there is no way to define a spring animation. Would be great to have something like the above schema.

[jameswinstondd]

I think in addition to the above comments, there may be room for a timeline node here to help with more of those complex situations.

A one-time four-point curve with an assumed 0% -> 100% gets the job done in most cases with simple code:

CSS

  /* some class*/
  animation-timing-function: cubic-bezier(0.2, -2, 0.8, 2)

  /*some keyframe*/
  from { /* start values */ }
  to {  /* end values */ }

But, great motion designers are creating with varied easing per keyframe in their animations. So with operability/alignment in mind and to perfectly replicate motion coming from After Effects or ProtoPie (or any tool), we'd need a way to declare a more complex time/style/value data like this:

CSS

  25% {
      animation-timing-function: ease-in;
  }
  50% {
    animation-timing-function: linear;
  }
  75% {
    animation-timing-function: ease-out;
  }

Keyframes node?

{
  "transition": {
    "emphasis": {
      "$type": "transition",
      "$value": {
        "duration": "200ms",
        "delay": "0ms",
        "timeline": [
         {
             keyframe: "25%",
             easing: [0,0,1,1],
         },
         {
             keyframe: "50%",
             easing: "linear",
         }
         {
             keyframe: "71%",
             easing: ${someCurveReference},
         }
         ]
      }
    }
  }
}

Have a simple A to B move? That's just a 2 length timeline array.

For me, thinking in frames and timeline percentage with regard to tokens makes sense and leaves everything a little open. It vaguely feels familiar due to how gradients work and has the added benefit of sounding like how you might chat about a motion move: "Like a quarter of the way through the timeline, maybe add a keyframe and make the element jump up slightly before it eases back into its last spot."