Hyprland Wiki
Contribute to the Wiki!Toggle Dark/Light/Auto modeToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeBack to homepage

Animations

Table of contents

General

Animations are declared with the animation keyword.

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.

SPEED is the amount of ds (1ds = 100ms) the animation will take

CURVE is the bezier curve name, see 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.

Examples

animation=workspaces,1,8,default
animation=windows,1,10,myepiccurve,slide
animation=fade,0

Animation tree

global
  ↳ windows - styles: slide, popin
    ↳ windowsIn - window open
    ↳ windowsOut - window close
    ↳ windowsMove - everything in between, moving, dragging, resizing.
  ↳ layers - styles: slide, popin, fade
  ↳ 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
    ↳ fadeLayers - for controlling fade on layers
  ↳ 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
    ↳ specialWorkspace - styles: same as workspaces

Curves

Defining your own Bezier curve can be done with the bezier keyword:

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, but if you want to instead choose from a list of beziers, you can check out easings.net.

Example

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:

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:

animation=workspaces,1,8,default,slidefade 20%