Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[web-animations-2] Propose a new timing option align to replace SequenceEffect #9557

Open
ydaniv opened this issue Nov 3, 2023 · 1 comment
Labels
web-animations-2 Current Work

Comments

@ydaniv
Copy link
Contributor

ydaniv commented Nov 3, 2023

Currently the synchronization of child animations in a GroupEffect is specified by either using a GroupEffect or a SequenceEffect as demonstrated in the spec.

I propose simplifying this approach with a new property in the EffectTiming options with proposed name align (TBB) that controls alignment of child animations in the group, with the possible following values:

  • start: all children start at the effective start-time of the group. This is the default value
  • end: all children end at the effective end-time of the group, while also respecting endDelay.
  • sequence: each child starts sequentially after its preceding sibling effect, just as currently defined for SequenceEffect.
  • sequence-reverse: same as sequence but the order of siblings is reversed.

IMHO this method should also make the definition of GroupEffect more clear and separated from the concern of child synchronization.
The idea here is also to align the JS API with the proposed CSS API by using the same longhand property name. Otherwise, using a different class may translate into a separate shorthand like sequence-effect, or otherwise become awkward.

@ydaniv ydaniv added the web-animations-2 Current Work label Nov 3, 2023
@birtles
Copy link
Contributor

birtles commented Nov 6, 2023

This is a good idea. It's more consistent with CSS behavior and I think that anything makes our animation properties/APIs feel more like temporal layout ("flexbox for time") is probably a good step towards creating a more coherent platform.

For what it's worth, I think we arrived at the current API design due to following the precedent of other animation APIs like SMIL (which has <par> and <seq> elements) and QML (see wiki). I agree we should make the JS API match what we do in CSS and drop the separate SequenceEffect class.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
web-animations-2 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants