Skip to content

feat(window): add minimize and restore dock animations. - #760

Open
KarunyaChavan wants to merge 7 commits into
WordPress:trunkfrom
KarunyaChavan:feat/windows-minimize-animation
Open

feat(window): add minimize and restore dock animations.#760
KarunyaChavan wants to merge 7 commits into
WordPress:trunkfrom
KarunyaChavan:feat/windows-minimize-animation

Conversation

@KarunyaChavan

@KarunyaChavan KarunyaChavan commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

This PR introduces a "genie" animation for minimizing and restoring windows, replacing the old fade effect. Windows now visually shrink and fly directly into their corresponding dock icon, and grow back out from the dock when restored.

Closes #759

visual_demo.mov

Why?

  • The previous fade transition lacked a visual connection between a minimized window and its dock tile, making the action feel disconnected.
  • The genie flight path gives users a clear, intuitive spatial cue ("this window went into that icon"), making it obvious how to restore it.
  • It also makes the workspace feel more dynamic and polished, elevating the overall feel of the OS to be much more premium.

What Changed?

  • src/window/index.ts:

    • Replaced the CSS opacity/fade logic with the Web Animations API (WAAPI) to calculate and play the genie trajectory between the window's bounds and its dock tile icon.
    • Added structural helpers (_buildGenieTransform, _cancelGenieAnimation, _clearGenieStyles) to keep the implementation DRY across the minimize, restore, and destroy lifecycles.
  • assets/css/window-states.css:

    • Removed the old CSS fade transitions that were previously managing the minimize state, handing visual control over to the JS animation.
  • src/dock.ts: Existing Bug Fix:

    • Fixed an issue where apps opened from shortcuts or plugin-registered launchers (which aren't permanently pinned to the dock) could not be restored by clicking their dock tile.
    • The click handler for windowId-only tiles was only calling focus(), which reordered the z-stack but never unminimized the window. We now correctly check the state and call restore() if the window was minimized.

- Implement WAAPI-driven scale-and-translate minimize flight targeting the owner dock tile
- Implement symmetrical reverse restore flight from dock icon back to window rect
- Ensure .os-window--minimized suppresses base transitions to prevent post-animation visual bounce/maximize flash
- Add `osWindowBaseId` dataset attribute to dock tiles for reliable icon target resolution
- Extract `_clearGenieStyles`, `_cancelGenieAnimation`, `_buildGenieTransform`, and `_canGenieAnimate` helpers.
- Eliminate duplicate cancel/cleanup boilerplate across `minimize()`, `restore()`, and `destroy()`.
- Unify the geometry math for WAAPI keyframes.
…plugin tiles

`openPage()` only called `windowManager.focus()` for windowId-only tiles
(shortcut icons promoted to dock, plugin-registered windows), which
reorders the z-stack but never unminimizes the window.
@AllTerrainDeveloper

AllTerrainDeveloper commented Sep 4, 2026

Copy link
Copy Markdown
Collaborator

Wow! Is looking great! I would personally add a more vanish towards the end of the minimize animation, what do you think?

@AllTerrainDeveloper

Copy link
Copy Markdown
Collaborator

@KarunyaChavan I've asked the same to another top contributor:

would you like to create a guest-post in our blog as one of the tops contributors? :)

You can write about yourself, who are you, why you like OpenStation, why you contribute, the tools you use, etc.

KarunyaChavan and others added 4 commits September 4, 2026 17:23
- Test WAAPI animation trigger and modifier classes during minimize/restore flights
- Verify prefers-reduced-motion bypasses the flight animation directly to minimized state
@KarunyaChavan
KarunyaChavan marked this pull request as ready for review September 4, 2026 13:06
@KarunyaChavan

Copy link
Copy Markdown
Contributor Author

I’ve added a fade-out at the end of the flight animation when the window is minimized, creating a vanishing effect. I’ve also adjusted the animation duration so it doesn’t feel too quick.

would you like to create a guest-post in our blog as one of the tops contributors? :)

Sure, it would be my pleasure. Thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Introducing animations: genie effect for minimizing windows

2 participants