Draggable Bottom sheet

[Nordef]

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

[Rodrigo]

Hi @Nordef and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

I think this is a better fit for the Observer Plugin rather than Draggable:

https://greensock.com/docs/v3/Plugins/Observer

 

Also I can't see the element that you should suppose to drag when the modal/sheet is not visible. On top of that I think you are over engineering this a bit IMHO, the approach I would use is far simpler (drag the fuchsia bar):

https://stackblitz.com/edit/vitejs-vite-gmz1zq?file=src%2Findex.css,src%2FApp.jsx,src%2FOverlay.jsx&terminal=dev

 

No need for that useCallback, since everything can be resumed into a single timeline and you can play/reverse that one using the onDragEnd callback from Observer and check the direction with the deltaY value.

 

Also I noticed you are not using GSAP Context in your React app:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

When using GSAP in React environments GSAP Context is your best friend since it allows you to scope your selectors inside and allows you to easily cleanup in the cleanup phase of the effect hooks. I strongly recommend you to check the information in this page:

 

And the starter templates collection we have in Stackblitz:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Hopefully this helps.

Happy Tweening!

[Nordef]

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?

[Rodrigo]

Ahh OK. In that case going back to Draggable and using a proxy would  be the best approach.

 

Here is a simple demo:

See the Pen zYyjXLW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweeing!

[Nordef]

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.

[Rodrigo]

Hi,

 

Just use a click event handler that updates the state in order to play/reverse the timeline on an useEffect hook with that state as a dependency. The rest is pretty much all in there since the onComplete and onReverseComplete callbacks will do the rest.

 

This basically a simple react question and not a GSAP one. I'd recommend you to check react's docs in order to get a better grasp of it and check the resources in our GSAP and React page, that I linked on my first post.

 

Happy Tweening!