W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2017

Re: [csswg-drafts] [web-animations-2] Idea: Custom Effects

From: Brian Birtles via GitHub <sysbot+gh@w3.org>
Date: Tue, 05 Dec 2017 04:43:16 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-349193909-1512448995-sysbot+gh@w3.org>
_From @notoriousb1t on August 3, 2016 22:1_

I think it is better to pass options to future proof the API a little.  By passing a function in directly, there are no opportunities to add additional hooks.  Also, you might need to know what direction and other timing information such as the playback rate to render your non-animation correctly, so I think that passing the delta isn't going to be sufficient.  

If there isn't a desire for the browser to do render optimization based on model changes, something like this would be simpler and provide opportunity for additional hooks:

``` javascript
const targetEl = document.createElement('div');
const effectOptions = {
    onsample(target, timing) {
        // renders "offset: x, rate: y"
        target.innerHTML = `offset: ${timing.computedOffset}. rate: ${timing.playbackRate}`;
    }
};
const timingOptions = { 
    duration: 1000, 
    easing: 'ease-in' 
};

const effect = new WebEffect(targetEl, effectOptions, timingOptions);
const animation = new Animation(effect, document.timeline);
animation.play();
```

That sort of falls in line with using onsample in a KeyframeEffect though.


-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2062#issuecomment-349193909 using your GitHub account
Received on Tuesday, 5 December 2017 04:43:28 UTC

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