Skip to Content
guides-3jkv7xdAnimations

Last Updated: 3/12/2026

Animations

Hyprland’s animation system brings fluidity and visual polish to window management. This guide covers animation configuration, bezier curves, and per-element animation control.

Animation Configuration

Animations are configured in the animations block:

animations {
    enabled = yes, please :)
    
    # Define bezier curves
    bezier = NAME, X0, Y0, X1, Y1
    
    # Apply animations
    animation = ELEMENT, ONOFF, SPEED, CURVE, [STYLE]
}

Bezier Curves

Bezier curves define animation easing. The format is:

bezier = NAME, X0, Y0, X1, Y1

Where X0, Y0 is the first control point and X1, Y1 is the second control point.

Default Curves

The example config includes these curves:

bezier = easeOutQuint,   0.23, 1,    0.32, 1
bezier = easeInOutCubic, 0.65, 0.05, 0.36, 1
bezier = linear,         0,    0,    1,    1
bezier = almostLinear,   0.5,  0.5,  0.75, 1
bezier = quick,          0.15, 0,    0.1,  1
  • easeOutQuint: Smooth deceleration
  • easeInOutCubic: Smooth acceleration and deceleration
  • linear: Constant speed
  • almostLinear: Nearly linear with slight easing
  • quick: Fast acceleration

Animation Elements

Global Animation

Sets default for all elements:

animation = global, 1, 10, default

Window Animations

animation = windows, 1, 4.79, easeOutQuint
animation = windowsIn, 1, 4.1, easeOutQuint, popin 87%
animation = windowsOut, 1, 1.49, linear, popin 87%

Styles for windows:

  • popin PERCENT: Windows scale from/to a percentage of their size
  • slide: Windows slide in/out

Border Animations

animation = border, 1, 5.39, easeOutQuint

Animates border color changes when focus switches.

Fade Animations

animation = fadeIn, 1, 1.73, almostLinear
animation = fadeOut, 1, 1.46, almostLinear
animation = fade, 1, 3.03, quick

Controls opacity transitions.

Layer Animations

For layer-shell surfaces (bars, notifications, overlays):

animation = layers, 1, 3.81, easeOutQuint
animation = layersIn, 1, 4, easeOutQuint, fade
animation = layersOut, 1, 1.5, linear, fade
animation = fadeLayersIn, 1, 1.79, almostLinear
animation = fadeLayersOut, 1, 1.39, almostLinear

Workspace Animations

animation = workspaces, 1, 1.94, almostLinear, fade
animation = workspacesIn, 1, 1.21, almostLinear, fade
animation = workspacesOut, 1, 1.94, almostLinear, fade

Styles for workspaces:

  • fade: Cross-fade between workspaces
  • slide: Slide transition
  • slidevert: Vertical slide

Zoom Factor Animation

animation = zoomFactor, 1, 7, quick

Animates the zoom level when using zoom dispatchers.

Animation Syntax

animation = ELEMENT, ONOFF, SPEED, CURVE, [STYLE]
  • ELEMENT: What to animate (windows, border, fade, etc.)
  • ONOFF: 1 to enable, 0 to disable
  • SPEED: Animation duration multiplier (higher = slower)
  • CURVE: Bezier curve name or default
  • STYLE: Optional element-specific style (popin, slide, fade)

Disabling Animations

Disable All Animations

animations {
    enabled = no
}

Disable Specific Elements

animation = windows, 0
animation = workspaces, 0

Performance Tuning

Reduce Animation Complexity

For lower-end hardware:

animations {
    enabled = yes
    
    bezier = simple, 0, 0, 1, 1  # Linear
    
    animation = windows, 1, 2, simple
    animation = border, 0
    animation = fade, 1, 1, simple
    animation = workspaces, 1, 1, simple, fade
}

Disable Fade Animations

Fade animations can be expensive:

animation = fadeIn, 0
animation = fadeOut, 0
animation = fade, 0

Custom Animation Profiles

Snappy Profile

Fast, responsive animations:

animations {
    enabled = yes
    
    bezier = snap, 0.1, 0, 0.1, 1
    
    animation = windows, 1, 2, snap
    animation = border, 1, 3, snap
    animation = fade, 1, 2, snap
    animation = workspaces, 1, 1.5, snap, slide
}

Smooth Profile

Slow, fluid animations:

animations {
    enabled = yes
    
    bezier = smooth, 0.25, 0.1, 0.25, 1
    
    animation = windows, 1, 8, smooth, popin 90%
    animation = border, 1, 10, smooth
    animation = fade, 1, 5, smooth
    animation = workspaces, 1, 4, smooth, fade
}

Testing Animations

Live Reload

Animations reload instantly when you save your config. Test different curves and speeds by editing and saving.

Bezier Curve Visualization

Use online bezier curve visualizers to design custom curves:

Animation Tips

  1. Match animation speed to element size: Faster for small elements, slower for large
  2. Use easing for natural feel: Avoid linear animations except for special effects
  3. Consistent curves: Use the same curve family across related elements
  4. Test on your hardware: What feels smooth on high-end hardware may stutter on lower-end
  5. Disable what you don’t see: If you don’t notice an animation, disable it for performance

What’s Next

Customize window appearance with the Decorations guide.

Configuration BasicsDecorations