search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.45k stars 4.17k forks source link

Navigator: add exit animation #51499

Open jameskoster opened 1 year ago

jameskoster commented 1 year ago

For fun I was playing with animation values for the Navigator component and noticed a potential bug: the exit animation seems to be broken.

Take a look at the following video, where I slowed down the duration and tweaked the transform values to make the issue clearer:

https://github.com/WordPress/gutenberg/assets/846565/687dd29d-25c2-407d-bd87-e4805480bf8d

When I click 'Pages', instead of the active 'Design' panel animating out of view, it disappears instantly. Likewise when I click back, the Pages panel disappears instantly.

It's not easy to spot on trunk as the duration for this animation is so low. But what is seen cannot be unseen 😆 Definitely not a high priority item, but I figured it was worth reporting.

cc @ciampo @mirka

mirka commented 1 year ago

I'm guessing the motion.div needs to be wrapped in an AnimatePresence.

ciampo commented 1 year ago

the exit animation seems to be broken.

Navigator has actually never supported exit animations 😃

We had a draft PR but we never iterated on it. I guess we could resume work on it at some point (and yes, as Lena suggested, we'd likely need to add AnimatePresence)