Not able to create a Perfect Horizontal Scrolling using Draggable plugin

[Mohit Pain]

I'm trying to create draggable horizontal scrolling using the GSAP Draggable Plugin. My code is working 90% fine, but I'm encountering a problem at the end. When I try to drag the "drag button" to the end of the viewport, it moves further than the .container. I want it to stop at the .container. Why is it crossing the width of the container?

 

and my for loop is also not woking! i'm trying to add a "marker" div inside the timeline using forloop.

 

please correct my all mistake.. i want my drag to be working till the width of the container not more that that.

See the Pen eYayVvV by Mohit-Mishra-the-styleful (@Mohit-Mishra-the-styleful) on CodePen

[Cassie]

Hey!

 

I wasn't quite sure what you were doing with your math here so I rewrote it so that the drag is controlling a tween's progress.

Here you go!

 

See the Pen bGyazGd?editors=1010 by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi,

 

Just if you are curious we have this demo of two Draggable instances that control each other! 🤯

 

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

 

Happy Tweening!