Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Try a full screen mode appear animation #9910
This PR tries out a slight animation to full screen mode when it's loaded:
This is subtle (and due to frame rates, it cannot be observed in the GIF — so please give this PR a spin before weighing in) but helps the transition feel little more smooth.
A couple notes:
Old (no animation):
I dig it!
Assuming no, but just because it has to be asked, there's no way we can _scale the window upwards and leftwards, right? If possible that would be sweeter than the fade.
However the fade seems cool in place if it.
Is there a way we can test performance on this? Anyone have an old clanker around to test this on? Opacity is usually a relatively expensive operation depending on how it's implemented — i.e. creating a giant white layer on top and fading that out is actually cheaper than it is to change the opacity of text, if I recall correctly. Not sure how we can verify this, it seems cool to me, but it would be nice to know that it's not horrendous on old machines. CC: @shaunandrews @MichaelArestad for CSS-wizardry thoughts here.
So, after doing a little more digging, we could do something like this:
(I slowed that down a little bit for GIF frame rate purposes)
It's a little rough, but you can check that out in the
Whichever direction we go in, I'd love to get some performance thoughts from Shaun + Michael.
Definitely doable, but hacky. For example, we wouldn't want to actually resize the editor at all. Luckily, with all that white space we could sort of fake it by:
The real problem lies in any UI within the editor that is full width. For example, the toolbar. If we resize that via animation, it's extremely expensive and will be much slower on less powerful devices. I think there are perhaps clever ways around this as well, but generally I would lean against this approach as it is quite complex and prone to be broken down the road.
After a chat with @shaunandrews, I also explored animating the size of the white container (instead of animating the sidebar and adminbar off screen). This seems nice too:
... but I can't see any way to do it without animating the width of the editor, which is surely not performant. So it's not likely to be a workable solution.
That sounds reasonable to me — the original animation uses just an opacity fade + the toolbar slide in, so both be relatively performant (especially in comparison to the other options).
Would you mind giving the PR a final review in that case? When you do, be sure to leave fullscreen mode on, and exit to the "All Posts" screen. Then open up a few more posts, and observe that there's a quick fade in when they open automatically into full screen mode. I think this is fine (and I wasn't actually seeing it in all cases?