Re: [csswg-drafts] [web-animations-2] Custom effects (#6861)

TBH, I don't see much difference between the 2 methods, except for the effect's `target`.

- They both take a callback that takes either normalized progress or a raw one, i.e. time or pixels.
- They both hook into an `Animation` that wraps them with a corresponding `timeline`.
- They both have an associated `KeyframeEffectOptions` that sets their timing options.

And regarding using the target to play/pause:

> I agree that conceptually it makes sense to not have a target, though it could be a nice feature if we could skip custom effects if the target (e.g. the canvas being drawn to) was not in view or at least if the target is detached.

I think the playback management would better be solved using `AnimationTrigger`'s, though having the animation GC'd when a target is removed could be nice.

In @bramus's example the main issue not being able to get the the pseudo-element, unless you create grab the animation set by CSS and take the `animation.timeline`, so it could look something like this:

```
const timeline = $input.getAnimations()[0].timeline;
const effect = new CustomEffect(progress => { … }, {
  fill: 'both',
  direction: 'reverse'
});
const animation = new Animation(effect, timeline);
animation.rangeStart = 'contain 0%';
animation.rangeEnd = 'contain 100%';
animation.play();
```

We could also decide that `CustomEffect` also takes `target`, and then provide it as argument for the update callback. Could be useful for reusable drawing functions.

---------------------

> I think that the timing with respect to other effects needs to be clear either way. I think having a set of post-animation update callbacks is probably simpler to be honest.

Regarding sync between other effects, I suppose this is something that should probably be left for nesting effects via `GroupEffect`. We would need to define the order of operations of different effects.
But this could also be a good incentive for making progress on `GroupEffect`'s (:

-----------------

So to summarize, for me this boils down to ergonomics. So naming some use-cases to make this more concrete:

1. Sync with video playback
2. Run a custom rAF loop (for running canvas-based animations)
3. Sync with a WebGL uniform
4. Sync with a non-presentation SVG attribute
5. Sync with variable - e.g. to pass to a draw function for 2d context, or a 3rd party library

There are basically 2 goals here:

1. Run loop
2. Sync progress

In most of the use-cases I personally encounter in my work it's mostly more straightforward to use the `CustomEffect` syntax, because syncing with other animations is less of an issue.
But I also don't see a reason why we can't have both?

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


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

Received on Thursday, 24 October 2024 11:29:39 UTC