[Feature Request]: Properly align window content during MacOS window animation

[matthewjamesadam]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Electron Version

29.1.0

What operating system are you using?

macOS

Operating System Version

MacOS Sonoma 14.0

What arch are you using?

arm64 (including Apple Silicon)

Last Known Working Electron version

No response

Expected Behavior

Many Mac apps have sidebar UIs that act like drawers -- you can open and close them, and the desired behaviour is that the window expands on the left or right side to accommodate the sidebar content. So, opening a left-side sidebar would cause the left edge of the window to expand, displaying sidebar content. The content itself would stay in the same visual location. You can see this effect in the Raycast AI app:

CleanShot.2024-05-15.at.15.53.07.mp4

Actual Behavior

I am trying to write an Electron app that does this. The attached fiddle shows the closest I've gotten: in the fiddle, the content div size is fixed while the window animation occurs. The end result is that the right sidebar opens and closes as expected, but the left sidebar does not:

CleanShot.2024-05-15.at.15.43.50-converted.mp4

It appears as though the electron content is left-aligned, so while the window resize animation is running the content gets "pushed right", and the browser rendering runs a few frames behind.

I'd like some way to get the end UI effect I'm looking for -- the ability to animate the window resize in a way that is synchronized with the browser content resizing, so that the main content doesn't move while the animation is occurring.

Is there a way to pin the content to the right side while the animation is running? That might solve this, as I could temporarily pin the content to the right edge of the window while the left window edge is resizing. If not, I am willing to look into implementing this, if it's something the Electron team would be willing to accept as a feature.

Thank you!

Testcase Gist URL

https://gist.github.com/matthewjamesadam/ed16e517839534149c0ee001db6af256

Additional Information

No response

[clavin]

Hey, thanks for the report! We appreciate the screen recordings, the demo code, and all the details you've included.

While I'm triaging issues, I wanted to write and say that I'm going to convert this one to a feature request/enhancement. I don't believe I know of any existing functionality like this, but this would be a nice addition to see in Electron.

Edit: After some thinking, I believe you may potentially find some success experimenting with Views.

[matthewjamesadam]

Thanks for the feedback @clavin , I agree that this is an enhancement. To be clear, I am willing to put the work into providing a PR that allows this behaviour, though I might require some direction in how to approach this problem.

I'm not sure I follow what you're saying about Views -- are you thinking that if we use a WebContentView to host the main content, that it might be able to be pinned to the right side of the window while the left side of the window expands?