Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-easing-2] Adding multi-step linear-interpolated easing function #7414

Closed
wants to merge 4 commits into from

Conversation

jakearchibald
Copy link
Contributor

@jakearchibald jakearchibald commented Jun 24, 2022

Temporarily moved to jakearchibald#1 due to issues mentioned in #7414 (comment)


This PR defines linear-spline(), a way to create custom easings, as discussed in #229 (comment).

TODO:

  • Plug in "create a linear easing function"
  • Create diagrams to explain the feature
  • Add a note at the start, explaining the feature for developers

@okikio
Copy link

okikio commented Jun 24, 2022

image

@jakearchibald
Copy link
Contributor Author

jakearchibald commented Jun 24, 2022

@dshin-moz I've corrected the issues we discussed in the previous PR, and wrote a more solid algorithm for calculating the output for a given input (although you might be ahead of me there).

I've defined how the computed value works, matching gradients, but it seems silly now I've written it down. I'll open an issue to see if we can go for something simpler.

@jakearchibald
Copy link
Contributor Author

#7415 - to discuss the computed value

@dshin-moz
Copy link

Since we aren't overloading linear anymore, I presume it is no longer the case that linear-spline() is a shorthand of linear?

@jakearchibald
Copy link
Contributor Author

Yep. Although I'm open to bikeshedding.

@jakearchibald
Copy link
Contributor Author

I guess I need to define that in the parsing

@dshin-moz
Copy link

Yep. Although I'm open to bikeshedding.

linear-spline() != linear, I think that makes sense (A linear spline with 0 entries can't suddenly become f(x) = x)

@jakearchibald
Copy link
Contributor Author

Yeah, I kinda liked reusing linear, but everyone I told about it was "wtf??" until I explained it was still linear, but between points, and then they were "ohh, ok". So, I don't think it's worth the initial confusion.

@birtles
Copy link
Contributor

birtles commented Jun 25, 2022

Yeah, my experience is that short and memorable is better than semantically correct (hence why we should have used animation-easing instead of animation-timing-function). People learn to associate the slightly shifted meaning very quickly (a kind of semantic bleaching I guess).

I thought using linear() was great and spline makes me think of curves but that's just me.

@jakearchibald
Copy link
Contributor Author

I'll give it some thought over the weekend. Maybe I changed it too hastily.

@jakearchibald jakearchibald changed the title [css-easing-2] Adding linear-spline() [css-easing-2] Adding multi-step linear easing function Jun 27, 2022
@jakearchibald
Copy link
Contributor Author

Opened #7419 for the name bikeshedding

@jakearchibald jakearchibald changed the title [css-easing-2] Adding multi-step linear easing function [css-easing-2] Adding multi-step linear-interpolated easing function Jun 27, 2022
@jakearchibald
Copy link
Contributor Author

Seems increasingly likely this will go back to linear() #7419. I'm about to go on leave for a week, but I'll make the call when I'm back, and we can land this.

@plinss
Copy link
Member

plinss commented Jul 6, 2022

@jakearchibald Can you please move this PR into a fork of the repo, rather than a branch in the main repo?

Having branches puts an additional load on our draft server (and when there are history changes on the branch it plays havoc with the git to hg conversion currently used by that server).

(There are improvements planned for the draft server that will make this less of an issue, but we're not there just yet.)

@jakearchibald
Copy link
Contributor Author

Shall do. I'll close this once I have the fork in place. Sorry for the trouble caused!

@syncbot syncbot force-pushed the css-easing-2-linear-spline branch from ef29eae to 67c7a83 Compare July 6, 2022 16:23
@jakearchibald jakearchibald deleted the css-easing-2-linear-spline branch July 6, 2022 16:29
@jakearchibald
Copy link
Contributor Author

jakearchibald commented Jul 6, 2022

jakearchibald#1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants