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

Re: [csswg-drafts] [css-timing-2] - Custom Timing Functions in JavaScript

From: Christopher Wallis via GitHub <sysbot+gh@w3.org>
Date: Sat, 11 Feb 2017 04:47:57 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-279121156-1486788475-sysbot+gh@w3.org>
@vidhill I looked over your proposal (and followed some of the links 
in it) and have a few thoughts of how to tie some of your ideas into 
this proposal.  

**In JavaScript**
```js
// registers the timing-function for use in CSS
window.registerTimingFunction('frames', (frameCount) => {
    // allows for pre-calculation based on input
    const co = 1 / (frameCount - 1);

    // returns the function to sample the curve
    return (offset) => {
        const out = floor(offset * frameCount) * co;
        return offset >= 0 && out < 0 ? 0 : offset <= 1 && out > 1 ? 1
 : out;
    };
});
```

**In CSS**
```css
.stopwatch {
    animation: tick 1s frames(60);
}
```

-- 
GitHub Notification of comment by notoriousb1t
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/1012#issuecomment-279121156
 using your GitHub account
Received on Saturday, 11 February 2017 04:48:06 UTC

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