search

steven-tey / precedent

An opinionated collection of components, hooks, and utilities for your Next.js project.
https://precedent.dev
MIT License
4.78k stars 420 forks source link

Fixed the phone screen leaflet exit animation #20

Open azaek opened 1 year ago

azaek commented 1 year ago

Exit animation weren't working properly due to 2 AnimatePresence wrap

vercel[bot] commented 1 year ago

@azaek is attempting to deploy a commit to the Elegance Team on Vercel.

A member of the Team first needs to authorize it.

steven-tey commented 1 year ago

Thanks for the PR! Just checking this out – it seems like it's still not working?

https://user-images.githubusercontent.com/28986134/213510905-c8e824f8-47aa-48d5-9e84-72f70e17ba90.mp4

azaek commented 1 year ago

Weird I have literally the same code in another project and it works 😶. I'm gonna look more

azaek commented 1 year ago

https://user-images.githubusercontent.com/92246587/213555906-abc13005-90ff-4df8-82d3-116eee63970c.mp4

image
azaek commented 1 year ago

Update on the issue: AnimatePresence doesn't trigger the exit animation if the dialog components are used from hooks. If you use the base dialog component without it works fine.

steven-tey commented 1 year ago

@azaek whoa interesting! So in this case you can't use the Leaflet component from within a hook? Sounds kinda odd – would it be a bug on Framer Motion's side?

azaek commented 1 year ago

Yea it's very odd. I guess it's from Framer Motion's side, I raised a bug issue there. Let's see

steven-tey commented 1 year ago

Awesome, thank you so much @azaek! Can you link to the issue here?

azaek commented 1 year ago

Sure, https://github.com/framer/motion/issues/2009