Jump to content
Search Community

Draggable Bottom sheet

Nordef test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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.



See the Pen by s (@s) on CodePen

Link to comment
Share on other sites

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:



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):



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:



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:



Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites



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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...