Re: [csswg-drafts] [css-easing-2] Custom curve-based easing functions (#7508)

The CSS Working Group just discussed `[css-easing-2] Custom curve-based easing functions`.

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> TabAtkins: Easying 2 spec added linear() function<br>
&lt;fantasai> TabAtkins: which allows any timing function you want in theory, but annoying if non-trivial function<br>
&lt;fantasai> TabAtkins: so there's a big batch of suggestions for other timing functions<br>
&lt;fantasai> TabAtkins: Possibilities include<br>
&lt;fantasai> piecewise cubic splines<br>
&lt;fantasai> SVG paths<br>
&lt;fantasai> other cubic-splines ideas<br>
&lt;flackr> q+<br>
&lt;fantasai> cubic-bezier<br>
&lt;fantasai> spring<br>
&lt;fantasai> midpoint<br>
&lt;fantasai> stacking easing functions<br>
&lt;fantasai> chaining easing function<br>
&lt;fantasai> easing based on math, e.g. supply a sin() function or whatever<br>
&lt;fantasai> JS-driven easing functions, 2 variants<br>
&lt;fantasai> TabAtkins: I want to decide which ones we want to include in easing 2 vs defer<br>
&lt;fantasai> TabAtkins: inclined to do just chaining and cubic-splining<br>
&lt;fantasai> TabAtkins: but could also be sold on spring<br>
&lt;kbabbitt> q+<br>
&lt;fantasai> TabAtkins: otherwise at some point will ask for a cutoff<br>
&lt;emilio> q+<br>
&lt;fantasai> TabAtkins: opinions?<br>
&lt;astearns> ack flackr<br>
&lt;ydaniv> q+<br>
&lt;fantasai> flackr: Don't have strong opinions on which specific function<br>
&lt;fantasai> flackr: but if using automatic duration for spring(), usually compute based on a distance<br>
&lt;fantasai> flackr: but animations don't currently have a distance<br>
&lt;fantasai> flackr: some hard to know what it would be, others there's no distance (e.g. color)<br>
&lt;fantasai> flackr: so we'll need an answer to that if we want to do it<br>
&lt;astearns> ack kbabbitt<br>
&lt;fantasai> kbabbitt: I only have an opinion on JS-driven. I understand desire, but either need to super constrain or will not be able to run performantly<br>
&lt;fantasai> TabAtkins: if JS available, generating a sufficient precise linear() is trivial, just do it<br>
&lt;astearns> ack emilio<br>
&lt;fantasai> emilio: 1st comment in issue also mentions SVG paths<br>
&lt;fantasai> emilio: how would you do that?<br>
&lt;fantasai> TabAtkins: similar to cubic-bezier()<br>
&lt;fantasai> TabAtkins: restrictions force it to be a function (one y per x)<br>
&lt;fantasai> TabAtkins: idk, don't think we should pursue<br>
&lt;fantasai> emilio: [mumble]<br>
&lt;astearns> ack ydaniv<br>
&lt;fserb> q+<br>
&lt;fantasai> ydaniv: I think we can pursue the math function one<br>
&lt;fantasai> ydaniv: using same syntax we have today for relative color<br>
&lt;fantasai> ydaniv: it will probaby kill the JS-driven use cases<br>
&lt;fantasai> ydaniv: and will cover a lot of easings that can be closely handled by cubic-bezier etc.<br>
&lt;fantasai> ydaniv: so that's worth trying<br>
&lt;fantasai> ydaniv: regarding spring(), might be difficult if we define something that gives you a duration that's not immediately known<br>
&lt;fantasai> ydaniv: stuff in Web Animations 2 like group effect<br>
&lt;fantasai> ydaniv: might need to know animation duration ahead of time<br>
&lt;fantasai> TabAtkins: integration with other types of animations makes me uncertain about an easing that has its own duration baked in<br>
&lt;fantasai> TabAtkins: more things to answer<br>
&lt;astearns> ack fserb<br>
&lt;fantasai> fserb: +1 to avoid the cubic-bezier and to use spline<br>
&lt;fantasai> fserb: because the code to handle that is awful<br>
&lt;fantasai> fserb: I think spline? is generic enough<br>
&lt;fantasai> fserb: if can do chaining etc then should be good enough<br>
&lt;fantasai> fserb: I think math-based is not good. Chaining is easier to understand<br>
&lt;fantasai> fserb: given that ? is not easy<br>
&lt;fantasai> fserb: given what I've seen people try to do<br>
&lt;fantasai> fserb: I have list of advanced cases, e.g. mobiel has special easings etc.<br>
&lt;fantasai> s/mobiel/mobile<br>
&lt;fantasai> TabAtkins: idk if multi-spline is fully general, but it can do a lot of htings including spring<br>
&lt;fantasai> fserb: Way specified, it allows for discontuity<br>
&lt;fantasai> astearns: enough feedback, Tab?<br>
&lt;TabAtkins> TabAtkins: yep<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7508#issuecomment-2378055713 using your GitHub account


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

Received on Thursday, 26 September 2024 22:34:52 UTC