Generates invalid values. Missing values.

[supermoos]

Thanks for this great tool, while it mostly works, I found that when using the generated linear() values with a transition: transform 1s linear(...) the generated values are not valid. However by simply inspecting the generated value in chrome I can copy paste a valid equivalent from the easing visualizer popup. Here's an example:

This was generated: :root { --spring-easing: linear( 0, 0.002, 0.006 1.2%, 0.025 2.4%, 0.057, 0.102 5.2%, 0.202 7.9%, 0.444 13.7%, 0.553 16.4%, 0.656 19.3%, 0.742, 0.814, 0.874 27.7%, 0.9, 0.922, 0.943 32.2%, 0.96 33.9%, 0.974 35.3%, 0.985, 0.995, 1.003 40.1%, 1.01, 1.015 43.7%, 1.018, 1.02 47.9%, 1.021 50.8%, 1.02 54.2%, 1.008 69%, 1.003 77.7%, 1 87.2%, 1 ); --spring-duration: 0.667s; }

But it just makes the transition not work at all.

However after inspecting the equation in chrome, it "corrects" the equation to one that does work:

linear(0 0%, 0 0.6%, 0.01 1.2%, 0.03 2.4%, 0.06 3.8%, 0.1 5.2%, 0.2 7.9%, 0.44 13.7%, 0.55 16.4%, 0.66 19.3%, 0.74 22.1%, 0.81 24.9%, 0.87 27.7%, 0.9 29.2%, 0.92 30.7%, 0.94 32.2%, 0.96 33.9%, 0.97 35.3%, 0.99 36.9%, 1 38.5%, 1 40.1%, 1.01 41.9%, 1.02 43.7%, 1.02 45.8%, 1.02 47.9%, 1.02 50.8%, 1.02 54.2%, 1.01 69%, 1 77.7%, 1 87.2%, 1 100%)

Notice the slight notation change, from what the tool outputs, vs what the chrome easing visualizer says it's read as the equation:

So it can be worked around with the above approach, however it's a bit cumbersome.

[bramus]

This was generated: :root { --spring-easing: linear( 0, 0.002, 0.006 1.2%, 0.025 2.4%, 0.057, 0.102 5.2%, 0.202 7.9%, 0.444 13.7%, 0.553 16.4%, 0.656 19.3%, 0.742, 0.814, 0.874 27.7%, 0.9, 0.922, 0.943 32.2%, 0.96 33.9%, 0.974 35.3%, 0.985, 0.995, 1.003 40.1%, 1.01, 1.015 43.7%, 1.018, 1.02 47.9%, 1.021 50.8%, 1.02 54.2%, 1.008 69%, 1.003 77.7%, 1 87.2%, 1 ); --spring-duration: 0.667s; }

But it just makes the transition not work at all.

I don’t see any problem here, as that’s a valid curve.

Demos using it:

• Animation: https://codepen.io/bramus/pen/QWXmXKZ/f257d6d5190c01fb2103075f560a8f81
• Transition: https://codepen.io/bramus/pen/KKjojWJ/4fbe3a1670cf833b466db11e78af864c

(I did notice a bug in Chrome DevTools where it shows ease as the computed style for the transition-timing-function whereas it should be the linear(…) one. Manually calling getComputedStyle() confirms the correct computed value.)

[supermoos]

I'm not sure what's going on, but you're demo doesn't work for me either. However when I apply the workaround it works fine. I've attached a screen recording demonstrating the bug and workaround.

https://github.com/user-attachments/assets/bd009de8-843f-4a9e-9a7b-d354bb2bbeac

[bramus]

Weird. Looks like a Chrome-implementation bug in that case … could you file a bug on https://crbug.com/new? Feel free to CC me on the bug (bramus@chromium.org)

[jakearchibald]

Filed https://issues.chromium.org/issues/361652145

[jakearchibald]

I've pushed a 'fix' where the copy button in the UI will copy a version without line breaks. But yeah… this will be impacting sites in the wild.

[bramus]

Shoot, I was still on Chrome 127 for some reason … updating to Chrome 128 and can confirm it’s broken (😭).

Thanks for filing the issue, Jake!

If you’ve got existing curves that are broken, try removing the whitespace before the first value after linear(.

[supermoos]

Sorry, for the delayed response, and thanks for filing the bug.

[bramus]

The bug in Chrome was fixed, with the fix landing in Chrome 130 (Canary at the time of writing). Backmerges were done to also land this fix into Chrome 129 and Chrome 128.

Chrome Stable 128.0.6613.138 was released a while ago and your Chrome should auto-update to it. If not, visit chrome://settings/help to trigger an update.

Closing, as Chrome fixed their implementation and Jake also pushed a fix to make sure the generator does not spit out whitespace after the opening (.

Thanks for your input, everyone!

[jakearchibald]

Just updated Chrome to 128.0.6613.138 and it's fixed. Yay!