[Draggable Bottom sheet]

Thanks, this is a better solution

But one more question remains
I want to open the 'overlay' with a button outside the cover, not with a 'topBar'.
In react components, I need to have a 'state', and listen to it and open the overlay when this 'state' changes.

[Draggable Bottom sheet]

Thanks @Rodrigo your answer is very useful

but as i said i need to open overlay with a button out of overlay.

also in your solution When the user drags the topbar, the overlay does not move with the user's mouse.

i think i should use onDrag and calculate page percentage right?

[Draggable Bottom sheet]

Hi, I am new to gsap

I want to implement draggable bottom sheet with gsap
  I want to use the timeline to open when I click the button, and close it when I click back, and when I drag the gray line to the top of the screen, the bottom sheet goes full screen, and when I drag it to the bottom Drag closes.

 

https://codesandbox.io/s/reverent-farrell-dmyqll

See the Pen by s (@s) on CodePen