2024-02-20 22:16:07 +02:00
---
weight: 9
title: Animations
---
2022-10-23 17:35:39 +03:00
2024-02-20 22:16:07 +02:00
## General
2022-09-24 16:32:40 +03:00
Animations are declared with the `animation` keyword.
2022-09-24 17:03:37 +03:00
```ini
2024-07-30 22:59:15 +03:00
animation = NAME, ONOFF, SPEED, CURVE [,STYLE]
2022-09-24 16:32:40 +03:00
```
2025-07-18 20:16:57 +02:00
`ONOFF` use `0` to disable, `1` to enable. _Note:_ if it's `0` , you
2024-02-20 22:16:07 +02:00
can omit further args.
2022-09-24 16:32:40 +03:00
2025-07-18 20:16:57 +02:00
`SPEED` is the amount of ds (1ds = 100ms) the animation will take.
2022-09-24 16:32:40 +03:00
`CURVE` is the bezier curve name, see [curves ](#curves ).
2025-07-18 20:16:57 +02:00
`STYLE` (optional) is the animation style.
2022-09-24 16:32:40 +03:00
The animations are a tree. If an animation is unset, it will inherit its
2022-10-23 17:35:39 +03:00
parent's values. See [the animation tree ](#animation-tree ).
2022-09-24 16:32:40 +03:00
2024-02-20 22:16:07 +02:00
### Examples
2022-09-24 16:32:40 +03:00
2022-10-23 17:35:39 +03:00
```ini
2024-07-30 22:59:15 +03:00
animation = workspaces, 1, 8, default
animation = windows, 1, 10, myepiccurve, slide
animation = fade, 0
2022-09-24 16:32:40 +03:00
```
2022-10-23 17:35:39 +03:00
2024-02-20 22:16:07 +02:00
### Animation tree
2022-10-23 17:35:39 +03:00
```txt
2022-09-24 16:32:40 +03:00
global
2025-02-16 20:54:26 +00:00
↳ windows - styles: slide, popin, gnomed
2025-04-18 21:42:23 +02:00
↳ windowsIn - window open - styles: same as windows
↳ windowsOut - window close - styles: same as windows
2022-09-24 16:32:40 +03:00
↳ windowsMove - everything in between, moving, dragging, resizing.
2024-02-28 15:02:22 +00:00
↳ layers - styles: slide, popin, fade
2024-04-04 22:41:36 +07:00
↳ layersIn - layer open
↳ layersOut - layer close
2022-09-24 16:32:40 +03:00
↳ fade
2024-04-04 22:41:36 +07:00
↳ fadeIn - fade in for window open
↳ fadeOut - fade out for window close
2022-09-24 16:32:40 +03:00
↳ 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 15:02:22 +00:00
↳ fadeLayers - for controlling fade on layers
2024-04-04 22:41:36 +07:00
↳ fadeLayersIn - fade in for layer open
↳ fadeLayersOut - fade out for layer close
2025-08-03 13:45:43 +02:00
↳ fadePopups - for controlling fade on wayland popups
↳ fadePopupsIn - fade in for wayland popup open
↳ fadePopupsOut - fade out for wayland popup close
2025-08-17 09:37:53 +02:00
↳ fadeDpms - for controlling fade when dpms is toggled
2023-02-01 21:07:36 +00:00
↳ border - for animating the border's color switch speed
↳ borderangle - for animating the border's gradient angle - styles: once (default), loop
2023-08-18 03:30:43 +07:00
↳ workspaces - styles: slide, slidevert, fade, slidefade, slidefadevert
2024-08-21 14:38:44 +02:00
↳ workspacesIn - styles: same as workspaces
↳ workspacesOut - styles: same as workspaces
2022-09-24 16:32:40 +03:00
↳ specialWorkspace - styles: same as workspaces
2024-08-21 14:38:44 +02:00
↳ specialWorkspaceIn - styles: same as workspaces
↳ specialWorkspaceOut - styles: same as workspaces
2025-07-01 11:33:51 +02:00
↳ zoomFactor - animates the screen zoom
2025-08-16 21:05:40 +02:00
↳ monitorAdded - monitor added zoom animation
2022-09-24 16:32:40 +03:00
```
2025-10-29 20:52:11 +01:00
> [!WARNING]
> Using the `loop` style for `borderangle` requires Hyprland to _constantly_ render new frames at a frequency equal to your screen's refresh rate (e.g. 60 times per second for a 60hz monitor), which might stress your CPU/GPU and will impact battery life. <br>
> This will apply even if animations are disabled or borders are not visible.
2024-10-14 02:08:16 +02:00
2024-02-20 22:16:07 +02:00
## Curves
2022-09-24 16:32:40 +03:00
2025-07-18 20:16:57 +02:00
Defining your own [Bézier curve ](https://en.wikipedia.org/wiki/B%C3%A9zier_curve ) can be done with the `bezier` keyword:
2022-09-24 16:32:40 +03:00
2022-09-24 17:03:37 +03:00
```ini
2024-07-30 22:59:15 +03:00
bezier = NAME, X0, Y0, X1, Y1
2022-09-24 16:32:40 +03:00
```
2025-07-18 20:16:57 +02:00
where `NAME` is a name of your choice and `X0, Y0, X1, Y1` are the the two control points for a Cubic Bézier curve. < br >
A good website to design your own Bézier can be [cssportal.com ](https://www.cssportal.com/css-cubic-bezier-generator/ ). < br >
If you want to instead choose from a list of pre-made Béziers, you can check out [easings.net ](https://easings.net ).
2022-09-24 16:32:40 +03:00
2024-02-20 22:16:07 +02:00
### Example
2022-09-24 16:32:40 +03:00
2022-09-24 17:03:37 +03:00
```ini
2025-07-18 20:16:57 +02:00
bezier = overshoot, 0.05, 0.9, 0.1, 1.1
2022-09-24 16:32:40 +03:00
```
2022-10-23 17:35:39 +03:00
2024-02-20 22:16:07 +02:00
### Extras
2022-10-23 17:35:39 +03:00
For animation style `popin` in `windows` , you can specify a minimum percentage
2024-02-20 22:16:07 +02:00
to start from. For example, the following will make the animation 80% -> 100% of
the size:
2022-10-23 17:35:39 +03:00
```ini
2024-07-30 22:59:15 +03:00
animation = windows, 1, 8, default, popin 80%
2022-10-23 17:35:39 +03:00
```
2025-09-06 20:24:36 +03:00
For animation styles `slide` , `slidevert` , `slidefade` and `slidefadevert` in `workspaces` , you can
2024-02-20 22:16:07 +02:00
specify a movement percentage. For example, the following will make windows move
20% of the screen width:
2023-08-18 03:30:43 +07:00
```ini
2024-07-30 22:59:15 +03:00
animation = workspaces, 1, 8, default, slidefade 20%
2023-08-18 03:30:43 +07:00
```
2024-03-28 01:41:40 +00:00
2025-07-18 20:16:57 +02:00
For animation style `slide` in `windows` and `layers` you can specify a forced side. < br >
You can choose between `top` , `bottom` , `left` or `right` .
2024-03-28 01:41:40 +00:00
```ini
2024-07-30 22:59:15 +03:00
animation = windows, 1, 8, default, slide left
2024-03-28 01:41:40 +00:00
```