Re: [community-group] Transition type feedback (#103)

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."_ 

-- 
GitHub Notification of comment by jameswinstondd
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/103#issuecomment-1604721087 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 23 June 2023 18:54:11 UTC