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

Looks good! Thanks for doing this! There are two areas I'm particularly interested in.

**1. `animation-group-ordinal`**

I'm curious to know more about how you see `animation-group-ordinal` working and if there are steps we should take to make it more ergonomic.

I think the [`order`](https://developer.mozilla.org/docs/Web/CSS/order) property is a useful precedent for this sort of property. However it's a bit different because for layout _normally_ the source order and the layout order match so you only need to specify `order` occasionally.

It's probably less common for source order and _temporal_ order to match, however? _Sometimes_ they will match (e.g. when you're animating a list in or out), and sometimes the order of animations in the `animation-name` property could provide the correct group ordering, but when you're animating the elements of a screen layout, for example, neither the source order not the `animation-name` order is likely to provide a suitable group ordering and the `animation-group-ordinal` property will be needed.

I guess we need some example content to play with to see what makes most sense? We might discover that a relative ordering could be helpful, e.g. `before <animation-name>`?

**2. Bottom-up vs top-down**

Forgive me if you've covered this elsewhere, but I'm curious if there was a particular reason for taking a bottom-up approach vs a top-down one such as defining the group children via an `@` rule instead?

I think what you have is probably the more CSS-y way to go, but from an authoring point of view, I imagine it might be simpler to define all the children at once like you would do in JS, e.g.

```css
.curtain {
  animation: slide-open 1s;
  animation-ref: --curtain;
}

.character {
  animation: fade-in 1s --character;
}

@animation-group intro {
  /* Group delay... build the suspense */
  animation-delay: 1s;
  /* Specify child animations or groups */
  animation-group-items: --curtain, --character;
}
```

Just an idea for comparison. Apart from being easier to reason about from an authoring point of view, one advantage is it provides an unambiguous order for children. I'm sure there are plenty of disadvantages, however.

-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9554#issuecomment-1793963678 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 01:58:53 UTC