Re: [csswg-drafts] [css-animations-2] Synchronised animation timelines (#8534)

I agree with @birtles, this can and should be solved by group effects.
Although the term "timeline" was used for this purpose in some libraries, e.g. GSAP, it's not the correct construct here. So this might be a source of confusion.

@bramus your example should be solved with group effects if these animations are added to same group, then they sync their progress with the group's.


> For this issue specifically, what about if any name value for animation-timeline that wasn't bound to a declared timeline, instead of being an inactive timeline, was an automatically-generated time-based timeline?

We definitely need a declarative way to use group effects, though IMO using timelines here is not the correct way. We already have some mixup of `animation` matching actually to `KeyframeEffect`s. So trying to continue this path for using `*-timeline` for groups will probably make things worse.

For example: we could specify `group-timeline` will be used for declaring a group effect with a name and timing properties, like:

```css
group-timeline: --group-a 1s linear 2s;
```

and then elsewhere specify `animation-timeline` to use that name.

The main problem with this approach is that you can't play that group effect using a different timeline, like a ViewTimeline.

--------

## My proposed solution:

1. Add a new property like `animation-group` that takes a list of idents to add an animation to a group, and possibly an integer for the order in a sequence.
2. Add a new property,  name to be bike-shedded, like `group-effect`, to declare a group effect that can be later used as above.

The `group-effect` can be just specified on a parent, which all `animation-group`s just seek upwards on the tree.
The `group-effect` property can be a shorthand of all properties: `name`, `type`, and rest of timing properties.
`name` can be a dashed/custom-ident.
`type` to specify `group` or `sequence`.

An example usage could be something along the lines of:

```css
@keyframes slide { ... }
@keyframes blink { ... }

#container {
  group-effect-TBD: --gorup-1 sequence 2.5s 0.5s linear 2;
}

#target {
  animation:
    slide 1s ease-out both,
    blink 1.5s ease-in-out 1s infinite;
  animation-group: --group-1, --group-1;
}
```

Once the common parent with the `group-effect` is matched, that animation becomes active and starts its progress, and then the same goes for its children accordingly.

For further nesting we'll also need `group-effect` to be nest-able inside another group, so the syntax also needs to account for that, though I think we can't use `animation-group` again, since it's used with `animation`. I suppose adding another ident to its syntax should be the way to go.
 



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


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

Received on Sunday, 8 October 2023 14:43:10 UTC