Trying to create Draggable slider in react.js (Help me with this)

[akrdesign]

I am trying to create Draggable slider in react.js but I am getting an error in Draggable.create. You can see my code here https://codesandbox.io/p/sandbox/gallant-fog-dfjsq9?file=%2Fsrc%2FPicker.js%3A72%2C1

Thanks in Advance

[Chriis]

@akrdesign You forgot to register the Draggable plugin to GSAP. You can do so by adding this below your Draggable import:

gsap.registerPlugin(Draggable)

 

[akrdesign]

20 hours ago, Chriis said:

@akrdesign You forgot to register the Draggable plugin to GSAP. You can do so by adding this below your Draggable import:

gsap.registerPlugin(Draggable)

 

Thanks for your response, the error that was coming earlier has been fixed. This is my first time using the Draggable plugin. I think I'm doing it right but my slider is not working. https://codesandbox.io/p/sandbox/gallant-fog-dfjsq9?file=%2Fsrc%2FPicker.js

[Cassie]

Hi there, I've tried to help but codesandbox is such a pain.

It's intermittently working for me and I can't console log anything at all so I can't really help any more.

 

https://codesandbox.io/p/sandbox/trusting-firefly-h24jz9?file=%2Fsrc%2FPicker.js%3A12%2C20

 

Maybe start on stackblitz with something simple and then gradually layer up until you have it working?

Here's a start - using the useGSAP hook for easy cleanup too

https://stackblitz.com/edit/react-eqvmej?file=src%2Fstyle.css,src%2FApp.js

[Rodrigo]

Hi,

 

Indeed Codesandbox can be a bit of a pain from time to time, that's why we recommend Stackblitz.

 

On top of that you weren't using GSAP Context or our new useGSAP hook (as @Cassie's demo shows) in order to do proper cleanup, especially in React's StrictMode.

 

Finally there was a problem in the calculations being made to set the progress of the animation in the Draggable's onDrag callback. Here is a working demo that uses the Wrap utility method:

https://stackblitz.com/edit/vitejs-vite-4l3tw8?file=src%2FApp.jsx

 

https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap()

 

Hopefully this helps.

Happy Tweening!

[akrdesign]

On 11/24/2023 at 8:19 PM, Cassie said:

 

@Cassie Thanks for your response now can you please help me with this https://stackblitz.com/edit/react-7ogfwx?file=src%2FApp.js

[Rodrigo]

Hi,

 

just use the same code of the last demo but inside a useGSAP instance:

https://stackblitz.com/edit/vitejs-vite-l2rufe?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

[akrdesign]

11 hours ago, Rodrigo said:

Hi,

 

just use the same code of the last demo but inside a useGSAP instance:

https://stackblitz.com/edit/vitejs-vite-l2rufe?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

 

@Rodrigo Thank you so much 💓

[akrdesign]

14 hours ago, Rodrigo said:

Hi,

 

just use the same code of the last demo but inside a useGSAP instance:

https://stackblitz.com/edit/vitejs-vite-l2rufe?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

@Rodrigo When I am dragging the slider it is not working smoothly. What could be the mistake? I am looking something like this 

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

[Rodrigo]

Hi,

 

The reason could be that the demo is not using the Inertia Plugin. The codepen demo you linked in your last post does.

 

I updated the demo to use the Inertia Plugin:

https://stackblitz.com/edit/vitejs-vite-l2rufe?file=src%2FApp.jsx

 

Happy Tweening!

[akrdesign]

6 hours ago, Rodrigo said:

 

@Rodrigo Thank you so much!! You are superb...