How to scroll element inside Draggable element?

[leoarada]

Hi there.

 

I am trying to create a bottomsheet.

 

As you guys can see, there is a scrollable div element inside draggable element.

 

If scrollTop is 0 then the element should be dragged toward bottom side when users drag or touch down.

 

If scrollTop is more than 0 then it should scroll and should not be dragged.

 

But the problem is that I cannot solve this issue.  

 

I searched about this issue and i got the hint that I should use allowEvnetDefault option to fix this issue.

 

And I tried to solve this issue but i can't. How can I fix this issue?

See the Pen KKvXbEy?editors=1111 by jiyong-lee (@jiyong-lee) on CodePen

[Rodrigo]

Hi @leoarada and welcome to the GreenSock forums!

 

First is the click event on the red elements that is not GSAP related at all. That will inevitably close the parent element because of a state change in the parent component.

 

Then you are creating your Draggable instance oustide the GSAP Context scope. When working with react every GSAP instance in a component should be inside the scope of a GSAP Context instance:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    Draggable.create(/*...*/);
  });
  
  return () => ctx.revert();
}, []);

All you have to do is check the scroll position and enable/disable the Draggable instance:

https://greensock.com/docs/v3/Plugins/Draggable/disable()

https://greensock.com/docs/v3/Plugins/Draggable/enable()

 

Also I wouldn't recommend doing this:

useLayoutEffect(() => {
  let ctx;
  ctx = gsap.context(() => {});
  // Later on your code, re-assign ctx to a different GSAP Context instance
  ctx = gsap.context(() => {});
  return () => ctx.revert();
}, []);

Because the GSAP instances added to the first assignment of ctx won't get reverted and that could lead to unexpected errors, odd behaviour and memory leaks. Just add stuff to the GSAP context instance using the add() method or even better, as I mentioned before, create every GSAP instance inside the scope of the GSAP Context instance.

 

Finally try to avoid using top/bottom/left/right in your animations, better use X/Y/xPercent/yPercent in order to use transform and get better performance.

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[leoarada]

Thank u so much!!