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

Thanks @birtles!

> I think the approach you've outlined allows both effects to be achieved.

Yes, I didn't think about the group easing in this case, but yes, I think you could specify a value like the "static stagger" example above and the easing on top would take care of that.

> Having part of the group-effect-align shorthand map to the parent group and part map to the children is a little odd

I didn't see it that way. I did follow your "flexbox" model here, so `-type` is used for justifying and `-offset` for extra margins. This could be odd, but these properties have no sense outside the context of a group, so specifying the offset independently losses that context, i.e. the context required for staggering.

> Just to check, I believe you are proposing that `group-effect-align-offset` will be computed into the delay of the corresponding `CSSAnimation` objects' `KeyframeEffect`s such that JS authors won't have to try to serialize/parse strings like start calc(100ms * log(effect-count - effect-index + 1))

The intent was to append the result of `-offset` per child to the child's own `delay` or `endDelay` correspondingly. So that if for some reason you specified both they would be respected.
And yes, since staggering becomes very cumbersome when you need to specify delay per element, and also because it only becomes meaningful in the context of a group.

> To produce a similar stagger effect in JS, authors would use JS math functions to calculate the appropriate delays.

Yes, most libraries allow a stagger function just for that. The intent is to replace that with `calc()`, math functions, and the `effect-index` and `effect-count` that should provide the missing arguments that these functions usually take.

-- 
GitHub Notification of comment by ydaniv
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9561#issuecomment-1794365415 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 09:06:44 UTC