feat: cubic-bezier curve for animation (#2059)

* feat: bezier curve for animation

* fixes

---------

Co-authored-by: Ivan Molodetskikh <yalterz@gmail.com>
This commit is contained in:
Horu
2025-08-29 15:31:50 +10:00
committed by GitHub
parent d9833fc1c3
commit 1ffda91e0c
5 changed files with 181 additions and 6 deletions
+13 -3
View File
@@ -84,14 +84,24 @@ animations {
}
```
Currently, niri only supports four curves:
Currently, niri only supports five curves.
You can get a feel for them on pages like [easings.net](https://easings.net/).
- `ease-out-quad` <sup>Since: 0.1.5</sup>
- `ease-out-cubic`
- `ease-out-expo`
- `linear` <sup>Since: 0.1.6</sup>
You can get a feel for them on pages like [easings.net](https://easings.net/).
- `cubic-bezier` <sup>Since: next release</sup>
A custom [cubic Bézier curve](https://www.w3.org/TR/css-easing-1/#cubic-bezier-easing-functions). You need to set 4 numbers defining the control points of the curve, for example:
```kdl
animations {
window-open {
// Same as CSS cubic-bezier(0.05, 0.7, 0.1, 1)
curve "cubic-bezier" 0.05 0.7 0.1 1
}
}
```
You can tweak the cubic-bezier parameters on pages like [easings.co](https://easings.co?curve=0.05,0.7,0.1,1).
#### Spring