From 1ffda91e0cc3938af1a9d4f1f1b6a87afa3c210f Mon Sep 17 00:00:00 2001 From: Horu <73709188+HigherOrderLogic@users.noreply.github.com> Date: Fri, 29 Aug 2025 15:31:50 +1000 Subject: feat: cubic-bezier curve for animation (#2059) * feat: bezier curve for animation * fixes --------- Co-authored-by: Ivan Molodetskikh --- docs/wiki/Configuration:-Animations.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'docs') diff --git a/docs/wiki/Configuration:-Animations.md b/docs/wiki/Configuration:-Animations.md index 0012aa83..224f99cd 100644 --- a/docs/wiki/Configuration:-Animations.md +++ b/docs/wiki/Configuration:-Animations.md @@ -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` Since: 0.1.5 - `ease-out-cubic` - `ease-out-expo` - `linear` Since: 0.1.6 - -You can get a feel for them on pages like [easings.net](https://easings.net/). +- `cubic-bezier` Since: next release + 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 -- cgit