Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add bounce effect to sidebars' animations #5598

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

marcoambrosini
Copy link
Contributor

@marcoambrosini marcoambrosini commented May 16, 2024

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

@marcoambrosini marcoambrosini self-assigned this May 16, 2024
@marcoambrosini marcoambrosini added the 2. developing Work in progress label May 16, 2024
@marcoambrosini
Copy link
Contributor Author

@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?

@marcoambrosini marcoambrosini changed the title Improve sidebars animations Add bounce effect to sidebars' animations May 16, 2024
@marcoambrosini marcoambrosini added the enhancement New feature or request label May 16, 2024
@ShGKme ShGKme added the feature: app-sidebar Related to the app-sidebar component label May 17, 2024
@ShGKme
Copy link
Contributor

ShGKme commented May 17, 2024

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?

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 ShGKme added the feature: app-navigation Related to the app-navigation component label May 17, 2024
Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>
@ShGKme
Copy link
Contributor

ShGKme commented May 20, 2024

@marcoambrosini Did it help for you?

@marcoambrosini
Copy link
Contributor Author

marcoambrosini commented May 20, 2024

@ShGKme It seems that the sidebar doesn't close anymore after #5608
I'm trying to find out what's going on

@marcoambrosini
Copy link
Contributor Author

Waiting for this to be closed #5623

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2. developing Work in progress enhancement New feature or request feature: app-navigation Related to the app-navigation component feature: app-sidebar Related to the app-sidebar component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants