Skip to content

[css-easing-2] linear() custom easing #7484

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.

Sign up for GitHub

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

Merged
jakearchibald merged 25 commits into from
Jul 17, 2022
Merged

[css-easing-2] linear() custom easing #7484

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b4bad72
Calculating progress & serialising linear-spline
jakearchibald Jun 24, 2022
1c326ef
Define function creation
jakearchibald Jun 24, 2022
1e5b11d
Update largest number when inferring 0 for the first item
jakearchibald Jun 24, 2022
a4c01be
Simplify serialisation
jakearchibald Jun 27, 2022
8276f40
Spec tidy up
jakearchibald Jun 27, 2022
0e5043f
Connecting parsing and serialising
jakearchibald Jun 27, 2022
f621932
Fix indenting
jakearchibald Jun 27, 2022
ef29eae
Dark mode figures
jakearchibald Jul 6, 2022
2739467
Merge remote-tracking branch 'origin/main' into css-easing-2-linear-s…
jakearchibald Jul 6, 2022
05473a9
Markdown headings
jakearchibald Jul 6, 2022
f3c7508
Switch back to linear()
jakearchibald Jul 6, 2022
973a84a
Missed a few old spline references
jakearchibald Jul 7, 2022
c6fe005
Examples
jakearchibald Jul 8, 2022
c51794a
Existing examples are good enough IMO
jakearchibald Jul 8, 2022
8e38422
Forgot to specify 'index'
jakearchibald Jul 8, 2022
8fbc910
Missing comma
jakearchibald Jul 8, 2022
5221e11
Adding serialization examples
jakearchibald Jul 10, 2022
589a383
Be more specific about the linear keyword
jakearchibald Jul 10, 2022
ce4c5d1
A little more specific about the serialization of linear()
jakearchibald Jul 11, 2022
932ce07
Apply suggestions from code review
jakearchibald Jul 12, 2022
a509029
Fixes following review
jakearchibald Jul 12, 2022
d75bd5c
Clarify note
jakearchibald Jul 12, 2022
bdbb745
Make all graphs transparent
jakearchibald Jul 17, 2022
17e0ad3
One more
jakearchibald Jul 17, 2022
8ee8bf2
Move examples after normative text
jakearchibald Jul 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Dark mode figures
  • Loading branch information
@jakearchibald
jakearchibald committed Jul 6, 2022
commit ef29eae957b2517399abcb766eb4908f18df1791
24 changes: 18 additions & 6 deletions css-easing-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,14 @@ Repository: w3c/csswg-drafts
}
</pre>

<style>
@media (prefers-color-scheme: dark) {
.easing-graph {
background: none;
Copy link
Member

@tabatkins tabatkins Jul 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While you converted some of the SVGs to have opaque backgrounds, others you've newly added are still transparent, so this is actually making them less readable than the default background: white would do. I think you either want to remove this or make all the SVGs opaque.

Copy link
Contributor Author

@jakearchibald jakearchibald Jul 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My intention was to remove the backgrounds so the graphs could be placed in notes/examples without being in their own visual 'box'.

As in, render like this:

Screen Shot 2022-07-12 at 09 14 06

Rather than this:

Screen Shot 2022-07-12 at 09 14 17

But you would prefer the latter? (my preference isn't strong here so I'm happy to change it)

Copy link
Contributor Author

@jakearchibald jakearchibald Jul 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tabatkins ping. This is the last bit I'm unsure about.

Copy link
Member

@tabatkins tabatkins Jul 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your screenshot shows them against the lightmode note styling. Have you checked it against the darkmode note styling to confirm that it's actually readable? I suspect it's not. (I'm fine with removing the background in lightmode, since they're authored to be readable against a light background.) I'm mostly just confused why you decided you needed to add an opaque background to some images, but explicitly remove an opaque background from others, when they look fairly similar in color usage to me.

Copy link
Contributor Author

@jakearchibald jakearchibald Jul 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I use dark mode by default so I checked it there too (part of this PR is making those images work well in dark mode). The lack of consistency in the backgrounds is an error on my part, I'll fix them so they're all transparent.

Copy link
Contributor Author

@jakearchibald jakearchibald Jul 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here it is against darkmode styling. Seems readable to me.

Screen Shot 2022-07-17 at 11 12 21

}
}
</style>

Introduction {#introduction}
============================

Expand All @@ -63,7 +71,7 @@ input progress value and producing a corresponding transformed output progress
value.

<figure>
<img src="easing-function-example.svg" width="400"
<img class="easing-graph" src="easing-function-example.svg" width="400"
alt="Example of an easing function that produces an ease-in effect.">
<figcaption>
Example of an easing function that produces an ease-in effect.<br>
Expand Down Expand Up @@ -136,7 +144,11 @@ The syntax for the [=linear easing function=] is simply the

<h3 id=the-linear-spline-easing-function>The linear spline easing function: ''linear-spline()''</h3>

Note: TODO - add developer-facing description, with diagrams and examples.
<div class=note>
''linear-spline()'' allows developers to define their own easing using a series of points that are interpolated linearly.

By default, points are
</div>

A <dfn export>linear spline easing function</dfn>
is an [=easing function=]
Expand Down Expand Up @@ -328,7 +340,7 @@ The <var>x</var> coordinates of <var>P1</var> and <var>P2</var>
are restricted to the range [0, 1].

<figure>
<img src="cubic-bezier-easing-curve.svg" width="400"
<img class="easing-graph" src="cubic-bezier-easing-curve.svg" width="400"
alt="A cubic Bezier curve used as an easing function.">
<figcaption>
A cubic B&eacute;zier curve used as an easing function.<br>
Expand Down Expand Up @@ -373,7 +385,7 @@ The meaning of each value is as follows:
The keyword values listed above are illustrated below.

<figure>
<img src="curve-keywords.svg" width="500"
<img class="easing-graph" src="curve-keywords.svg" width="500"
alt="The easing functions produced by keyword values.">
<figcaption>
The easing functions produced by each of the cubic B&eacute;zier easing
Expand Down Expand Up @@ -445,7 +457,7 @@ The meaning of each value is as follows:
:: Computes to ''steps(1, end)''

<figure>
<img src="step-easing-keyword-examples.svg" width="500"
<img class="easing-graph" src="step-easing-keyword-examples.svg" width="500"
alt="Example step easing keywords.">
<figcaption>
Example step easing function keyword values.
Expand Down Expand Up @@ -484,7 +496,7 @@ The meaning of each value is as follows:
These values are illustrated below:

<figure>
<img src="step-easing-func-examples.svg" width="500"
<img class="easing-graph" src="step-easing-func-examples.svg" width="500"
alt="Example step easing functions.">
<figcaption>
Example step easing functions.
Expand Down
35 changes: 26 additions & 9 deletions css-easing-2/cubic-bezier-easing-curve.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 28 additions & 9 deletions css-easing-2/curve-keywords.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 26 additions & 7 deletions css-easing-2/easing-function-example.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading