W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2019

Re: [csswg-drafts] [web-animations-2] Allow multiple root effects per animations (#4464)

From: Majid Valipour via GitHub <sysbot+gh@w3.org>
Date: Tue, 26 Nov 2019 18:46:52 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-558766659-1574794011-sysbot+gh@w3.org>
/cc @yi-gu

It is not clear to me how  the proposed "sequence of effects" is different that `SequenceEffect` that is part of the GroupEffect proposal in web-animations 2. 

The current proposal for GroupEffect has a very appealing property that the group and leaf node in the tree have the exact same interface (i.e., the composite design pattern). So it supports creation of complex tree of effects without complicating the API. I like us to keep that. 

> And second, I propose more then one element to be targeted by the effect. That will also free the implementations of duplicated instances when the same effect will be applied to more then one element.

This is interesting. Basically the current group effect require the author to create individual animation effects and group them. In many cases, the timing and keyframes for these individual animation effects are shared. So it is repetitive and sub-optimal to create them individually. I believe your argument about "waste of runtime memory and performance" also refers to this.

I can see us adding new constructors to various Group Effect (Sequence, Parallel, Stagger), where the same keyframes and timing data can be shared.

Here is a strawman API:

```js
const targets = docuument.querySelectorAll('div.animated');
var effects = []
const timings = {duration: 100}
const keyframes = {transform: ["translateX(0)", "translateX(100%)"]}
for (var t of targets) {
    effects.push(new KeyframeEffect(target, keyframes, timing);
}
const animation = new Animation(new SequenceEffect(effects));
animation.play();
```

Alternative constructor to create a sequence effect with same keyframes, and timings but multiple targets.

```js
const targets = docuument.querySelectorAll('div.animated');
const timings = {duration: 100}
const keyframes = {transform: ["translateX(0)", "translateX(100%)"]}
const animation = new Animation(new SequenceEffect(targets, keyframes, timing));
animation.play();
```

I can imagine a similar constructor for Parallel and Stagger effects as proposed [here](https://yi-gu.github.io/group_effect/).

I personally agree that the second one is more ergonomic and can be better optimized. If supporting it requires just adding a second constructor to the existing model, I think the additional constructor is valuable enough and carries its weight. 

On the other hand, if this mean throwing out the existing interfaces with their nice composite property I don't think it is justified.



-- 
GitHub Notification of comment by majido
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4464#issuecomment-558766659 using your GitHub account
Received on Tuesday, 26 November 2019 18:46:54 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:56 UTC