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

Adding another use case here. 

We have an in-house tool for scroll-driven animations. It allows designers to create animations with image layers using KeyframeEffects. It also allow the designers to create Lottie-animations, videos, 3D-animations and more and hook these up to a scroll-driven animation. Right now we have two separate code paths, one for those based on keyframe effects, and one for the remaining animations. 

```js 
if (keyframeEffects) {
  for (const effect of keyframeEffects) {
    const animation = new Animation(effect, { timeline, rangeStart, rangeEnd }); // Assuming https://github.com/w3c/csswg-drafts/issues/11146
    animation.play();
  }
} else {
  const animation = this.animate({}, { timeline, rangeStart, rangeEnd });
  document.addEventListener('scroll', () => {
    // Measure progress and update elements
  });
}
```

Having custom effects with a target element would be hugely beneficial for this use-case, as we could have one code path for all animations. It would hopefully also give us the benefits of having the browser optimize when to update the animation, instead of managing this manually.

Another benefit would be the ability to reuse the custom effects across many of our animation tools, whether they are using a document, scroll timeline or say a pointer timeline.

A `progress` callback could simplify the setup for us, but we would still have to keep separate code-paths and we wouldn't get the benefit of reusable custom-effects.

I would love both; a custom effect to build pluggable, reusable effects, and a `progress` callback to keep js code in synk with an existing animation.

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


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

Received on Friday, 6 December 2024 13:20:47 UTC