- From: Adam Argyle via GitHub <sysbot+gh@w3.org>
- Date: Tue, 27 Jul 2021 18:27:20 +0000
- To: public-css-archive@w3.org
The author (@brumm) of a [shadow easing tool](https://brumm.af/shadows) has an [open source function](https://github.com/brumm/eaze) that we could emulate a CSS version after:
```js
const values = eaze(2, {
value: 10,
easing: easings.linear,
})
// [ [5], [10] ]
```
where in CSS we could have (straw man syntax):
```css
easeValues(3, 0px to 10px, linear)
/* 0px, 5px, 10px */
```
it wouldn't pacify uses case like `text-shadow`, `box-shadow` etc because those need more than lengths, they need full values like `0 0 5px black`, and I don't think we could support use cases like that..?
```css
box-shadow: easeValues(5,
0 2.8px 2.2px rgba(0, 0, 0, 0.02)
to
0 100px 80px rgba(0, 0, 0, 0.07),
ease-out
);`
```
could it? it almost starts to look like keyframes. and that also doesnt quite fulfill the use case of that shadow tool.. because it's using easing on the `y`, `blur` and `color` values with different easings. the above pseudo code would give all 3 the same easing, creating a different visual effect that's not as good.
just sharing my thoughts!
--
GitHub Notification of comment by argyleink
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5617#issuecomment-887734836 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 27 July 2021 18:27:26 UTC