w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.49k stars 660 forks source link

[css-easing-2] Is linear() easing in a shippable state? #7533

Closed emilio closed 8 months ago

emilio commented 2 years ago

The linear() easing function defined in #7484 (https://drafts.csswg.org/css-easing-2/#the-linear-easing-function) has gone through a lot of discussion in both the relevant PR and issues, but I think what ended up landing on the spec is pretty straight-forward.

Firefox has an implementation of this function which you can try on Firefox Nightly.

It'd be great to get the Working Group and other implementors to take a look, to see if there's any concern / outstanding issue that would benefit from a bit more bake-time / testing, or if this is something we could ship in the coming months.

I'd personally love at least an extra implementation ongoing, though again in this case it seems like a relatively straight-forward feature that would be great to get in authors' hands :)

cc @jakearchibald / @dshin-moz / @birtles

birtles commented 2 years ago

As editor of the easing spec, I'm happy with the state of this feature. I won't be able to join the F2F but consider this a vote in favour of clearing it to ship.

jakearchibald commented 2 years ago

@flackr: any rough implementation timeline we can commit to?

css-meeting-bot commented 2 years ago

The CSS Working Group just discussed Easing linear(), and agreed to the following:

The full IRC log of that discussion <TabAtkins> Topic: Easing linear()
<dbaron> github: https://github.com/w3c/csswg-drafts/issues/7533
<TabAtkins> github: https://github.com/w3c/csswg-drafts/issues/7533
<TabAtkins> emilio: There was a bunch of work to add linear(), spec was written by Jake a
<TabAtkins> emilio: End result was qite straightforward, it's a piecewise linear function
<TabAtkins> emilio: we have an impl in gecko
<TabAtkins> emilio: I just wanted to check whether the group is happy with design
<TabAtkins> emilio: I think it's a good compromise for th euse-cases it enables
<TabAtkins> emilio: So are we confident enough to ship it?
<iank_> is there a tag review for this feature?
<TabAtkins> emilio: Or ait?
<TabAtkins> emilio: birtles commented about the feature, says he's happy with it shipping
<Rossen_> q?
<lea> q+
<fantasai> emilio: Anyone need more time to check it out?
<fantasai> scribe+ fantasai
<ChrisLilley> tag reviow would be good
<fantasai> Rossen_: TAG review for the feature?
<fantasai> emilio: I don't think so, but can file one
<Rossen_> ack lea
<fantasai> lea: I haven't looked at this before, what use cases does it address and how does it relate to linear keyword?
<fantasai> emilio: It's a compromise to allow more complex functions than we currently allow
<fantasai> emilio: you can approximate other functions
<fantasai> lea: complex path through linear segments?
<fantasai> emilio: yes, exactly
<fantasai> lea: I agree that's really useful!
<fantasai> TabAtkins: Can approximate any easing function you want
<bramus> relevant demo that shows how it works: https://static-misc-3.glitch.me/linear-easing/4.html
<lea> q+
<fantasai> emilio: Compromise from adding a bunch of complex functions
<ChrisLilley> q+
<fantasai> lea: While very useful to approximate, there are many ways to interpolate, and linear is only one
<fantasai> lea: do we have any plans to add curved interpolation
<fantasai> lea: and if so, do we want to add a generic function instead of different functions by curve?
<dbaron> "the other one" !! :-)
<fremy> +1 to lea's point
<fantasai> emilio: perhaps. This all was discussed in issue 229
<fantasai> emilio: There's a follow-up issue, I'll paste link
<emilio> https://github.com/w3c/csswg-drafts/issues/7508
<Rossen_> ack lea
<TabAtkins> all is linear, quadratic, and cubic. there are no other easings
<fantasai> emilio: I don't feel strongly about having a linear function vs generic
<astearns> (previous discussion in https://github.com/w3c/csswg-drafts/issues/229)
<fantasai> lea: I agree with having the functionality in CSS, just unsure about the design
<fantasai> emilio: Discussed bezier, complex spline, etc.
<fantasai> emilio: I personally don't care
<Rossen_> q?
<fantasai> lea: If trying to approximate a curve, good to have a fallback
<bramus> (also see https://github.com/w3c/csswg-drafts/issues/7508 which was spilt off from 229)
<fantasai> emilio: usual CSS fallback
<fantasai> lea: but painful
<fantasai> TabAtkins: would still be painful
<astearns> (not sure interpolation fallback is something we should be designing around)
<ChrisLilley> q?
<fantasai> lea: Have a series of arguments that represent points, and if don't support the interpolation method, use the same points but different method
<fantasai> dbaron: If you add specific fallback rules that prevent authors from write their own custom fallback
<Rossen_> ack fantasai
<Zakim> fantasai, you wanted to react to lea to respond
<TabAtkins> fantasai: I think at some point we'll want a generic function that lets you interpolate differently
<dbaron> s/prevent/prevents/
<TabAtkins> fantasai: but linear() as designed now is simple and straightforward, and adding more things to it isn't necessarily better
<TabAtkins> fantasai: And some of th eother curves require more args than just the points.
<TabAtkins> fantasai: This is just the list of points.
<TabAtkins> fantasai: So even if we have a generic function, this is still useful on its own for author ease
<fantasai> ChrisLilley: Good thing about the P5 Linear is you can approximate anything with enough points
<fantasai> ChrisLilley: and you don't have off-curve points to add
<fantasai> ChrisLilley: Bad thing ist's always going to be discontinuous
<fantasai> ChrisLilley: If your points get animated, your piecewise thing falls apart
<fantasai> ChrisLilley: So another option, and I know I've brought it up before, is a thing called a ?????
<astearns> s/?????/catmull-rom/
<fantasai> ChrisLilley: which automatically produces a smooth curve through a set of point
<astearns> (sp)
<fantasai> ChrisLilley: I think this is objectively better
<fantasai> TabAtkins: it's not just that linear is simple
<fantasai> TabAtkins: but some things can't be produced with curves, e.g. step function
<fantasai> ChrisLilley: It's not a replacement, but in many cases it would be a better thing
<fantasai> TabAtkins: I agree it's the best simple way to get smoothness
<astearns> s/(sp)//
<Rossen_> q?
<Rossen_> ack ChrisLilley
<fantasai> ChrisLilley: I want that on the record, so when ppl complain we didn't do it it's on the record :)
<TabAtkins> fantasai: this spec doesn't have a fpwd
<TabAtkins> fantasai: so i think before we decide to ship we shoud do that and get review
<TabAtkins> Rossen_: and tag review
<TabAtkins> fantasai: so i think we shoudl publish fpwd, ask for review, then ask if it's ready to ship
<TabAtkins> emilio: sounds good
<Rossen_> ack fantasai
<Zakim> fantasai, you wanted to ask about FPWD
<Rossen_> ack dbaron
<TabAtkins> dbaron: admin - i think when we resolve something's ready to ship, we need to file an issue against the snapshot with a link to the resolution
<TabAtkins> dbaron: we have a history of resolving that things are shippable and not writing it down anywhere
<ChrisLilley> dbaron++
<astearns> +1
<ChrisLilley> qq+
<TabAtkins> dbaron: so i think one req should be an open issue against the snapshot
<TabAtkins> fantasai: i think it should be *in* the snapshot, just edit it
<TabAtkins> ChrisLilley: do we have to wait for december to publish snapshots?
<TabAtkins> fantasai: no
<TabAtkins> ChrisLilley: then we shoudl pub
<TabAtkins> Rossen_: anything else?
<Rossen_> q?
<Rossen_> ack ChrisLilley
<Zakim> ChrisLilley, you wanted to react to dbaron
<TabAtkins> Rossen_: So, objections to FPWD?
<TabAtkins> Rossen_: css-easing-2
<TabAtkins> RESOLVED: Publish css-easing-2 FPWD with linear() function
<TabAtkins> fantasai: i suggest a res to publish the snapshot
<TabAtkins> fantasai: and then once it's published at least once in a year, anyone can add to it and repub, not just the editor
<TabAtkins> florian: why not just publish a Note?
<TabAtkins> fantasai: we'll update it thru th eyear, seems like it should be a draft...
<TabAtkins> florian: Doesn't need to be
<TabAtkins> fantasai: kinda indicates we're updating
<TabAtkins> astearns: prefer to just publish as a Note
<TabAtkins> astearns: Or else we'll forget
emilio commented 2 years ago

TAG review: https://github.com/w3ctag/design-reviews/issues/761

jakearchibald commented 2 years ago

Thanks @emilio!

CanadaHonk commented 1 year ago

FYI: There's a new Chromium intent to prototype for this now 🎉

bramus commented 8 months ago

Given that this shipped in all major browsers, I think we can close this one, @emilio?