Try: Add animation to sidebar. #13635
Conversation
|
This could use the same component from the other PR. what do you think? |
|
If we dig it, absolutely it should! I'll rebase and make it happen if/when the other one ships. I'll also update the Publish dialog, which uses the same animation. |
|
This is great. Definitely an improvement. It seems a little weird to me that while the sidebar slides in, the content next to it abruptly pops over. But I figure it'd be fairly un-performant to animate all that content, too. 😄 The action here is all about the sidebar, so I think it's fine as is. I am seeing one bug though — the menu isn't appearing at all for me on smaller breakpoints:
|
|
Just as an update, I'm waiting for #13617 to land before rebasing and fixing up this one. |
|
Can we rebase this and try the "Animate" component? |
jasmussen
force-pushed
the
try/sidebar-animation
branch
from
4217fd3 to
e69bad9
Compare
jasmussen
requested review from
gziolo,
noisysocks,
talldan and
youknowriad
as code owners
|
Rebased this, but I won't have time to look into the animate component today as I have some other things I need to wrap. But if you have a bunch of time, feel free to commandeer this PR 👍 👍 |
jasmussen
requested review from
aduth,
ajitbohra,
chrisvanpatten,
jorgefilipecosta and
oandregal
as code owners
gziolo
added
General Interface
|
|
||
| body.is-fullscreen-mode & { | ||
| top: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @keyframes edit-post-layout__slide-in-animation { | ||
| @keyframes edit-post-post-publish-panel__slide-in-animation { |
There was a problem hiding this comment.
It's exactly the same as @keyframes components-animate__slide-in-animation {. Is it still necessary?
| @@ -173,15 +173,15 @@ | |||
| width: $sidebar-width; | |||
| border-left: $border-width solid $light-gray-500; | |||
| transform: translateX(+100%); | |||
| animation: edit-post-layout__slide-in-animation 0.1s forwards; | |||
| animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards; | |||
There was a problem hiding this comment.
How does it differ from .components-animate__slide-in?
There was a problem hiding this comment.
Yes, it's not ideal, but since the animation is not inheritant to the panel itself but more to the fact that it's used as a sidebar by the edit-post module, it doesn't make sense to introduce the component inside the panel, which makes this issue harder to solve. I decided to keep the CSS for this particular panel for now.
|
Travis seems to be very unhappy about this animation. It looks like we need to land #13769 first before we can proceed. In the meantime, this could use a review from someone who can ✅ UI part of the PR. Code wise it looks good. Nice work @jasmussen and @youknowriad. I really like this new |
|
This might need some tweaks for RTL, I need to check. |
youknowriad
force-pushed
the
try/sidebar-animation
branch
from
e871f41 to
01456b2
Compare
|
HAH you just merged :D :D — good, because I was about to 👍 👍 |
|
I had some additional enhancements but they are a bit sensitive so I decided to make a separate PR for them. Thanks so much for your help, Riad! |
|
Looking a bit into this, I've noticed a couple things: The sidebar animation happens also on page load:
Is this intentional? Doesn't seem ideal to me: I don't see why users should see an animation every time they open the edit post page. Note: for some reason, this is more evident in Firefox and Safari, especially when the post has some long content. More importantly: on Windows the vertical scrollbars are always visible. Whether users open the edit post page or toggle the sidebar, the visual effect is not so great:
Basically, for a fraction of a second users see an empty column with a vertical scrollbar. I've tried to make an animated GIF to better illustrate, but some frames get removed and it doesn't give a clear idea of the actual visual effect, which is not nice to see. |
|
Thanks, @afercia!
Yeah, this is also the case for our fullscreen load animation. I wonder if there's a way we can assign these animation classes only after the page's been fully loaded... 🤔 I've opened #13925 to track this.
This happens on Mac too, if you have scrollbars enabled:
(I slowed down the animation quite a bit to make sure it got picked up by the GIF, but this gets the general idea across) I'm not sure if we can do anything about this, but I've opened #13926 to track it. |
This is another "Try" branch for an animation. This animates in the sidebar. See also #13617
What do you think? This one I feel less certain about.