search

Temzasse / react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
https://temzasse.github.io/react-modal-sheet/
MIT License
846 stars 80 forks source link

detent: "content-height" dynamic content animation #172

Closed alexkates closed 4 days ago

alexkates commented 1 week ago

When using detent: "content-height" and dynamically adding/removing elements from the Sheet.Content, the Sheet grows or shrinks to the height of the content as expected.

However, it'd be great if the growing/shrinking was animated with a smoother transition.

This can be seen by using https://temzasse.github.io/react-modal-sheet/#/content-height. I've also attached a video.

https://github.com/user-attachments/assets/4f1ce369-eab6-4a0f-bd29-6e00ff9f84eb

alexkates commented 1 week ago

I think if the max-height was set to a value then I could add a max-height transition myself.

Temzasse commented 4 days ago

Hi @alexkates 👋🏻

This is already possible to without any changes to the react-modal-sheet library by adding layout prop to the Sheet.Container and layout="position" to the Sheet.Content component.

I've updated the content height example to smoothly animate the layout change. The updated version is live so you can test it here: https://temzasse.github.io/react-modal-sheet/#/content-height