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

@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]`.

![image](https://user-images.githubusercontent.com/18498712/202196066-8c7641a1-1793-4873-841e-05896b65fc23.png)

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`.

![image](https://miro.medium.com/max/1268/1*W1wBfxlJhwgQXB58sQXJDw.gif)


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
> ```json
> {
>       "$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
> ```json
> {
>       "$type": "transition",
>       "$value": {
>         "duration": string,
>         "delay": string,
>         "timingFunction": {
>            "$type": "spring",
>            "$value": "default"
>          }
>       }
> }
> ``

or we can rename `timingFunction` to `cubic-bezier`

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

here are some refs [Easing Docs from Android](https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)) and [ease visualizer from GSAP JS](https://greensock.com/ease-visualizer/)

what do you think?

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


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

Received on Wednesday, 16 November 2022 14:12:24 UTC