search

nolanlawson / pinafore

Alternative web client for Mastodon (UNMAINTAINED)
https://pinafore.social
GNU Affero General Public License v3.0
1.02k stars 173 forks source link

Indicator doesn't animate correctly during page transitions #2290

Closed nolanlawson closed 1 year ago

nolanlawson commented 1 year ago

Unfortunately #2274 seems to have regressed the "indicator" animation. Instead of smoothly animating the white bar over a dark background, the background jumps from dark to light, and then the white bar animates "into" it.

Old Pinafore on the left, new Pinafore on the right (animation slowed down from 0.3s to 2s for clarity):

https://user-images.githubusercontent.com/283842/205456145-06ec459a-acb9-47d3-91df-116ce6e3f897.mp4

The easiest way to repro this on desktop is to press the 1-6 keys to navigate without hovering. It also repros on Firefox on Android for me, by touching the nav buttons.

I played around with it a bit, but it's really hard to get this to work correctly. The main reason it was working before is that that "indicator wrapper" (i.e. background) did not have a different color in the hover or active state. So it was easy to animate the indicator bar over it.

There is probably a way to do this correctly with the new hover/active states, but I haven't figured it out yet.

nolanlawson commented 1 year ago

FYI @NickColley I'm not going to ask you to make my animations work with your new design; I did some crazy hacks to get the performance just right (i.e. FLIP animations), and so I'm not even sure if it's possible to make it work with your new design.

I will try to look into this if I have some time, but how would you feel about reverting the color change for the indicator background in #2274 for now?

NickColley commented 1 year ago

Ah I suppose it's different but not necessarily broken. Though it does stray from the original intent of the animation which is unfortunate. One alternative might be to remove the animations entirely as they're cool but don't fulfill a user need. Depends how wedded you are to them as I imagine getting it to work nicely was satisfying 🙃

nolanlawson commented 1 year ago

@NickColley Good animations can be considered an a11y boost because they communicate a change in state to the user. The web has historically been pretty bad at this because it's hard to get it right, although the View Transition API should helps. (Only works in Chrome behind a flag right now AFAIK.)

I think we can get the best of both worlds, but it's going to be some work. Let me tinker to see if I can make the animations work with the new design. :slightly_smiling_face: