sidebar animation improvement

[ThaUnknown]

the sidebar animation looks poor because of how much its moved offscreen, this can easily be fixed with:

.page-wrapper.with-sidebar[data-sidebar-hidden]>.sidebar {
    left: calc(-1 *var(--sidebar-width));
}

[halfmoonui]

Good point, I will also test this out.

[halfmoonui]

Hey, I was going to patch this out in v1.1.1, but after testing it, I found that the sidebar animation is still a bit jarring, especially when the page has a lot of content and iFrames (such as in the docs website). Do you perhaps have any other suggestion for this? I think the cubic-bezier function may be causing the delay.

[ThaUnknown]

sorry for the late reply, however, I couldn't find any issues with this?
video

[halfmoonui]

Do you have a powerful computer? Could be possible that the device I am using for testing is a bit slow. After some more testing, I have found the linear function to be the least jarring so far (coupled with your change in this issue).

[ThaUnknown]

Do you have a powerful computer? Could be possible that the device I am using for testing is a bit slow. After some more testing, I have found the linear function to be the least jarring so far (coupled with your change in this issue).

yeah, to say I have a powerful machine is an understatement, this is most likely a CSS performance issue since it changes the dom layout a lot during that animation

[ThaUnknown]

however on my mid-range phone it doesnt seem to be an issue at all either, what browser did you use?

[halfmoonui]

It's good that you bring this up because on phones, the sidebar changes to the overlay type, which is really smooth. The main issue seems to happen when the sidebar is the default type, and especially full-height.

[ThaUnknown]

It's good that you bring this up because on phones, the sidebar changes to the overlay type, which is really smooth. The main issue seems to happen when the sidebar is the default type, and especially full-height.

again, I'm not able to reproduce any of the issues you're having so idk how to help

[ThaUnknown]

@halfmoonui , will using the will-change css property help? from what I tested it could help a lot, could you try it on your hardware? here's an article on it: https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance