[csswg-drafts] [css-animations-2][web-animations-2] Staggering children of effects inside GroupEffect (#9561)

ydaniv has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animations-2][web-animations-2] Staggering children of effects inside GroupEffect ==
This is a proposal for syntax that allows staggering of child effects in a `GroupEffect` by expanding the `group-effect-align` property proposed in #9554 by making it a shorthand of 2 properties, plus introducing 2 new values (TBB): `effect-index` and `effect-count`.

## Description

The previously proposed `group-effect-align` property, for controlling synchronization of child effects inside the group, will become a shorthand of 2 sub properties: `-type` and `-offset`.

### `group-effect-align-type`
This property behaves same as [described here](https://www.w3.org/TR/web-animations-2/#sequence-effects), with the addition of splitting the parallel behavior of "GroupEffect" to `start` and `end`, which aligns the child effects to either start or end together respectively.
It has the following possible values:
* `start`: align all effects to start simultaneously.
* `end`: align all effects to end simultaneously.
* `sequence`: align each subsequent effect's start to the end of its preceding effect.
* `sequence-reverse`: same as `sequence` but with descending order, so each effect's start is aligned to its succeeding effect.

### `group-effect-align-offset`
This property allows specifying an additional delay offset that is added to to each child in the group. The extra delay offset is added either to the _start delay_, or the _end delay_ if `-type` is set to `end`.

###. `effect-index` and `effect-count1
The purpose of the `-offset` property is mostly to enable staggering effects.
To enable expressive staggering effects and reuse existing CSS math functions I propose adding 2 new identity values: `effect-index` and `effect-count` to reference the index of the child and count of children in the group respectively.
If `sequence` or `sequence-reverse` are used, the `-offset` property can still apply by offsetting each child effect relative to its normal position.

### Examples

```css
/* constant offset */
group-effect-align: start 100ms;
/* constant stagger */
group-effect-align: start calc(100ms * group-index);
/* eased stagger using log() assuming 1-based */
group-effect-align:  start calc(100ms * log(group-index));
/* constant stagger from end */
group-effect-align: end calc(100ms * group-index);
```

### Proposed syntax

```
group-effect-align: <group-effect-align-type> <group-effect-align-type>
group-effect-align-type: start | end | sequence | sequence-reverse
group-effect-align-type: <time>
```

I'm assuming there may be some pushback from developers expecting to see a "stagger" property. However, after reviewing various stagger implementations in some of the prominent animation libraries it seems that the API always implicitly assumes a form of `index *  <number>` by simply allowing a number as a value, e.g. `stagger: 0.1`.
Later this complicates the API further by having to indirectly specify other properties like "from", "ease", etc, which IMO are a bit implicit and "magical", and less suitable for a low-level web API.
I think that by *not* assuming the above form we can achieve a more flexible and explicit API, which can better leverage existing CSS math functions and values.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9561 using your GitHub account


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

Received on Monday, 6 November 2023 07:47:31 UTC