Add bounce effect to sidebars' animations

[marcoambrosini]

• [ ] Add variables and fallbacks
• [x] Fix issue with right sidebar not "bouncing" on narrow screens

[marcoambrosini]

@ShGKme @susnux I would need some help with this:

For some reason, for the right sidebar the transition works only below the breakpoint where the margins of the app content disappear. If the window is bigger than that, the bounce animation does not work. Could you please look into this together?

[ShGKme]

For some reason, for the right sidebar the transition works only below the breakpoint where the margins of the app content disappear. If the window is bigger than that, the bounce animation does not work. Could you please look into this together?

• To be fixed in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5608

The animated property isn't width but max-width. But max-width can be bigger than width.

For example, on 1440px wide screen, width is 27vw = 400px while max-width: 500px.

So in the beginning (ending) of the animation, it changes max-width to 500px -> 400px while the actual width stays 400px. It makes visual delay and breaks the easing function params.

[ShGKme]

@marcoambrosini Did it help for you?

[marcoambrosini]

@ShGKme It seems that the sidebar doesn't close anymore after https://github.com/nextcloud-libraries/nextcloud-vue/pull/5608 I'm trying to find out what's going on

[marcoambrosini]

Waiting for this to be closed https://github.com/nextcloud-libraries/nextcloud-vue/issues/5623

[susnux]

Waiting for this to be closed https://github.com/nextcloud-libraries/nextcloud-vue/issues/5623

is resolved