Skip to content

shell: fix glitchy sidebar toggle animation (#132)#137

Merged
Umbranoxio merged 1 commit into
ScoreSaber:mainfrom
ZoroLV:fix/smooth-sidebar-animation
Jun 1, 2026
Merged

shell: fix glitchy sidebar toggle animation (#132)#137
Umbranoxio merged 1 commit into
ScoreSaber:mainfrom
ZoroLV:fix/smooth-sidebar-animation

Conversation

@ZoroLV
Copy link
Copy Markdown
Contributor

@ZoroLV ZoroLV commented May 30, 2026

Fixes #132

changes:

  • refactored the sidebar to use fixed positioning with opacity based crossfades rather than constant unmount/remounting
  • added the react 19's inert attribute to hide the inactive sidebar state from pointer events
  • slightly increased main-content.tsx transition timing to duration-300 to better sync with the new sidebar animation

this eliminates the layout thrashing and text jitter from the container being resized

also by keeping both states in the DOM and animating opacity the browser doesn't need to trigger heavy reflows on every frame

before

before.mp4

after

after.mp4

@Umbranoxio Umbranoxio merged commit 06ca200 into ScoreSaber:main Jun 1, 2026
@ZoroLV ZoroLV deleted the fix/smooth-sidebar-animation branch June 1, 2026 06:47
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.

Fix glitchy sidebar behaviour

2 participants