Animations

General

Animations are declared with the hl.animation() method.

Syntax:

hl.animation({ leaf = str, enabled = bool, speed = float, curve = str, style? = str })

leaf is the scope of the animation. See Animation tree.
enabled can be either true to enable or false to disable. Note: if it’s false, you can omit further arguments.
speed is the number of deciseconds (100ms each) the animation will take. For example, speed = 1 = 100ms.
bezier/spring is a curve name, see curves.
style is the animation style. See Animation tree.

Examples

hl.animation({ leaf = "workspaces", enabled = true, speed = 8, bezier = "my_epic_bezier" })
hl.animation({ leaf = "windows", enabled = true, speed = 10, spring = "my_epic_spring", style = "slide"})
hl.animation({ leaf = "fade", enabled = 0 })

Animation tree

The animations are a tree. If an animation is unset, it will inherit its parent’s values.

global
  ↳ windows - styles: slide, popin, gnomed
    ↳ windowsIn - window open - styles: same as windows
    ↳ windowsOut - window close - styles: same as windows
    ↳ windowsMove - everything in between, moving, dragging, resizing.
  ↳ layers - styles: slide, popin, fade
    ↳ layersIn - layer open
    ↳ layersOut - layer close
  ↳ fade
    ↳ fadeIn - fade in for window open
    ↳ fadeOut - fade out for window close
    ↳ fadeSwitch - fade on changing activewindow and its opacity
    ↳ fadeShadow - fade on changing activewindow for shadows
    ↳ fadeGlow - fade on changing activewindow for glow
    ↳ fadeDim - the easing of the dimming of inactive windows
    ↳ fadeLayers - for controlling fade on layers
      ↳ fadeLayersIn - fade in for layer open
      ↳ fadeLayersOut - fade out for layer close
    ↳ fadePopups - for controlling fade on Wayland popups
      ↳ fadePopupsIn - fade in for Wayland popup open
      ↳ fadePopupsOut - fade out for Wayland popup close
    ↳ fadeDpms - for controlling fade when dpms is toggled
  ↳ border - for animating the border's color switch speed
  ↳ borderangle - for animating the border's gradient angle - styles: once (default), loop
  ↳ shadowangle - for animating the shadow's gradient angle - styles: once (default), loop
  ↳ glowangle - for animating the glow's gradient angle - styles: once (default), loop
  ↳ workspaces - styles: slide, slidevert, fade, slidefade, slidefadevert
    ↳ workspacesIn - styles: same as workspaces
    ↳ workspacesOut - styles: same as workspaces
    ↳ specialWorkspace - styles: same as workspaces
      ↳ specialWorkspaceIn - styles: same as workspaces
      ↳ specialWorkspaceOut - styles: same as workspaces
  ↳ zoomFactor - animates the screen zoom
  ↳ monitorAdded - monitor added zoom animation

Warning

Using the loop style for *angle animations 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. This will apply even if animations are disabled or the affected decorations are not visible.

Curves

Bezier

A cubic Bézier curve is a simple spline defined by 4 points, two of which (the middle ones) are configurable.

hl.curve( NAME, { type = "bezier", points = { {X0, Y0}, {X1, Y1} } })

cssportal.com can be a useful website to design your own Bézier. If you want to instead choose from a list of pre-made Béziers, you can check out easings.net.

Spring

A spring curve is one commonly found on Apple’s systems, and is defined by mass, stiffness and damping. It’s generally recommended to keep mass at 1, and adjust stiffness and damping alone.

hl.curve(NAME, { type = "spring", mass = float, stiffness = float, damping = float })

The more “stiffness”, the more speed, and the more “damping”, the less bounce.

Damping

Critical Damping

If the spring is critically damped, it settles fast and doesn’t overshoot (no bounce).

Critical damping occurs when $\zeta = 1$ , where

\zeta = \frac{c}{c_c} = \frac{c}{2\sqrt{k\,m}}, \quad \begin{cases} c & \text{damping coefficient*} \\ c_c & \text{critical damping coefficient} \\ k & \text{stiffness} \\ m & \text{mass} \end{cases}

* This is the damping value you give to the curve.

You probably want your damping around 0.6 to 0.8 for it to feel responsive and smooth.

Overdamped

Occurs when $\zeta > 1$ .

Returns slowly, no oscillation (doesn’t bounce).

Underdamped

Occurs when $\zeta < 1$ .

Oscillates (bounces), decays* exponentially.

* The amplitude of the bounces shrinks exponentially over time.

Examples

hl.curve( "overshoot", { type = "bezier", points = { {0.5, 0.9}, {0.1, 1.1} } } )
hl.curve( "rubber", { type = "spring", mass = 1, stiffness = 70, damping = 10 } )

Extras

For animation styles popin in windows, you can specify a minimum percentage to start from. For example, the following will make the window animate from 80% to 100% of its size:

hl.animation({ leaf = "windows", enabled = true, speed = 8, curve = "default", style = "popin 80%" })

For animation styles slide, slidevert, slidefade and slidefadevert in workspaces, you can specify a movement percentage. For example, the following will make windows move 20% of the screen width:

hl.animation({ leaf = "workspaces", enabled = true, speed = 8, curve = "default", style = "slidefade 20%" })

For animation styles slide in windows and layers you can specify a forced side. You can choose between top, bottom, left or right.

hl.animation({ leaf = "windows", enabled = true, speed = 8, curve = "default", style = "slide left" })

Last updated on August 29, 2026

Environment variables Autostart