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

@ydaniv Thanks for working on this. That looks promising. I'm having a little trouble remembering how all the parts fit together so perhaps we could work it out in the context of a specific application of case (4).

For example, suppose we have:

```html
<dialog>
  <div class="popup">
    <h1>Popup heading</h1>
    <ul>
      <li>List item 1
      <li>List item 2
      <li>List item 3
    </ul>
  </div>
</dialog>
```

Then suppose we want to implement the following animation when the `dialog:modal` selector matches:

1. Does an opacity fade on the `dialog::backdrop` pseudo element
2. Simultaneously instantly animates `.popup`'s `translate` property to `-100%` or somesuch so that it is initially offscreen (i.e. vertically off the top of the screen)
3. Slightly before the opacity fade ends, starts to animate `.popup`'s `translate` property to `none`.
4. After `.popup` arrives at its resting place, does an opacity fade on `h1` and each of the `li` elements in turn, i.e. "Popup heading", then "List item 1", then "List item 2" etc.. 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.

I wonder how we could express that so that it retains the benefits of group effects like being able to pause/seek the whole animation and adjust the duration globally?

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


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

Received on Friday, 26 January 2024 05:02:49 UTC