Re-creating window resize animations

[jmoggr]

I would like to know how to animate window sizes from quickshell. The landing page has several examples of this, however I have been unable to reproduce the effect after much trial and error.

examples:
https://github.com/user-attachments/assets/560a7e4e-cc1a-44df-9315-61c3e2795d51

Kooha-2025-02-21-15-57-16.webm

What I've tried:

• resizing popup windows: those don't have the same rounded corners on hyprland as seen in the examples and the popup windows won't receive mouse focus.
• resizing floating windows from hyprctl: quickshell animations and window resize animations were difficult/impossible to synchronize
• resizing floating windows from quickshell: I was unable to do this from quickshell. The width and height properties don't seem to be reactive.

I'm quite stumped on this and would appreciate any guidance, even if it's just pointing me towards broken/outdated configs.

Quickshell has been excellent! All of the friction I've had with it has actually been with QML (I'm new at it), and I'd really appreciate seeing more examples to pattern match against. The included intro to QML is really good, however it doesn't tell me something like how best to align items at various points on a bar, resizing windows, or other patterns which I assume would be quite common.

[outfoxxed]

The trick is pretty simple, but you're right - the documentation is severely lacking with this stuff. I haven't had the time to write it up.

Anyway the way it works is you make a transparent window with the largest dimensions the content will have, and content inside the window can take any shape you want (trying to dynamically resize the window itself will cause stutters).

Additionally under hyprland, HyprlandWindow.visibleMask can be used to make rendering those transparent regions far less expensive (usually only noticeable with blur), and HyprlandWindow.opacity can be used to fade a blurred window.

Here's whats actually going on with the launcher:
https://github.com/user-attachments/assets/63030fc4-dc1b-4b8f-921a-5cfe7803b0ed

This is a layer window btw.