Re: [csswg-drafts] [css-animations-2] Declarative syntax for GroupEffects (#9554)

> > Why do we need to define the length of the group here? For groups in Web Animations 2, by default they calculate their length from their children.
> 
> By "length" you mean duration? We don't need, I wasn't 100% sure whether the Group defines timing for its children or vice versa. So if it's defined by the children's duration then it's fine and we don't need to specify it again. So, IIUC, it's either we have "intrinsic" duration or "extrinsic" one.

Yes, duration. I think we ultimately want to get to a model similar to what we have for layout where by default children define the height of their parent, but parents can override it and children can be made to have a percentage of their parent's height.

That is, by default, the duration of the children defines the duration of the parent but we introduce means in future for expressing a child's duration as a proportion of its parent's.

> > It looks like we're defining some basic timing properties that apply to each child in the group but I wonder if that's the right place to do it. Given that groups and children can have their duration defined separately, maybe the child timing properties should only be defined on the child.
> 
> In your test-case you asked for a decaying stagger effect on the children:
> 
> > The fade animations should slightly overlap and ideally the amount of overlap should steadily increase so that the start of "List item 2" and "List item 3" is nearly the same.
> 
> So either we define specific `delay` on the children or `group-effect-align` on the parent. This is the syntax I proposed on #9561. It's like `place-items` and `place-self`, if you use `-align` on the parent you specify alignment for all the children in one property. If you specify `delay` you set that animation/group's alignment individually.

Oh, I see, sorry I'd forgotten about that. I'm still trying to process this but one question comes to mind:

Currently we have a situation where CSS animation/transition properties map pretty closely to Web animation models. If you get a `CSSAnimation` or `CSSTransition` object using `getAnimations()` and mutate part of the the object, we break the link with the corresponding CSS property (e.g. see this section https://drafts.csswg.org/css-animations-2/#animations).

If we have a CSS animation in a group with these `group-effect-align` properties etc. and we fetch the corresponding `CSSAnimation` object then mutate its start delay, will the other objects in the group continue to behave sensibly?

I guess my question is really, if we're introducing this alignment concept only in the CSS syntax, are there any cases where that causes problems when trying to interact with animations via the API?

-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9554#issuecomment-1963178801 using your GitHub account


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

Received on Monday, 26 February 2024 01:46:49 UTC