hyprland-wiki/pages/Configuring/Animations.md

103 lines
2.7 KiB
Markdown
Raw Normal View History

---
weight: 9
title: Animations
---
## General
2022-09-24 15:32:40 +02:00
Animations are declared with the `animation` keyword.
2022-09-24 16:03:37 +02:00
```ini
2022-09-24 15:32:40 +02:00
animation=NAME,ONOFF,SPEED,CURVE,STYLE
or
animation=NAME,ONOFF,SPEED,CURVE
```
`ONOFF` can be either 0 or 1, 0 to disable, 1 to enable. _note:_ if it's 0, you
can omit further args.
2022-09-24 15:32:40 +02:00
`SPEED` is the amount of ds (1ds = 100ms) the animation will take
`CURVE` is the bezier curve name, see [curves](#curves).
`STYLE` (optional) is the animation style
The animations are a tree. If an animation is unset, it will inherit its
parent's values. See [the animation tree](#animation-tree).
2022-09-24 15:32:40 +02:00
### Examples
2022-09-24 15:32:40 +02:00
```ini
animation=workspaces,1,8,default
animation=windows,1,10,myepiccurve,slide
2023-09-06 12:59:02 +02:00
animation=fade,0
2022-09-24 15:32:40 +02:00
```
### Animation tree
```txt
2022-09-24 15:32:40 +02:00
global
↳ windows - styles: slide, popin
↳ windowsIn - window open
↳ windowsOut - window close
↳ windowsMove - everything in between, moving, dragging, resizing.
2024-02-28 16:02:22 +01:00
↳ layers - styles: slide, popin, fade
2022-09-24 15:32:40 +02:00
↳ fade
↳ fadeIn - fade in (open) -> layers and windows
↳ fadeOut - fade out (close) -> layers and windows
↳ fadeSwitch - fade on changing activewindow and its opacity
↳ fadeShadow - fade on changing activewindow for shadows
↳ fadeDim - the easing of the dimming of inactive windows
2024-02-28 16:02:22 +01:00
↳ fadeLayers - for controlling fade on layers
2023-02-01 22:07:36 +01:00
↳ border - for animating the border's color switch speed
↳ borderangle - for animating the border's gradient angle - styles: once (default), loop
↳ workspaces - styles: slide, slidevert, fade, slidefade, slidefadevert
2022-09-24 15:32:40 +02:00
↳ specialWorkspace - styles: same as workspaces
```
## Curves
2022-09-24 15:32:40 +02:00
Defining your own Bezier curve can be done with the `bezier` keyword:
2022-09-24 16:03:37 +02:00
```ini
2022-09-24 15:32:40 +02:00
bezier=NAME,X0,Y0,X1,Y1
```
where `NAME` is the name, and the rest are two points for the Cubic Bezier. A
good website to design your bezier can be found
[here, on cssportal.com](https://www.cssportal.com/css-cubic-bezier-generator/),
but if you want to instead choose from a list of beziers, you can check out
[easings.net](https://easings.net).
2022-09-24 15:32:40 +02:00
### Example
2022-09-24 15:32:40 +02:00
2022-09-24 16:03:37 +02:00
```ini
2022-09-24 15:32:40 +02:00
bezier=overshot,0.05,0.9,0.1,1.1
```
### Extras
For animation style `popin` in `windows`, you can specify a minimum percentage
to start from. For example, the following will make the animation 80% -> 100% of
the size:
```ini
animation=windows,1,8,default,popin 80%
```
For animation styles `slidefade` and `slidefadevert` in `workspaces`, you can
specify a movement percentage. For example, the following will make windows move
20% of the screen width:
```ini
animation=workspaces,1,8,default,slidefade 20%
```
2024-03-28 02:41:40 +01:00
For animation style `slide` in windows and layers you can specify a forced side, e.g.:
```ini
animation=windows,1,8,default,slide left
```
You can use `top`, `bottom`, `left` or `right`.