Help for Sync Draggable, TL & Click

[Victor Work]

Hello, I'm having trouble synchronizing a progress bar with Draggable, I tried doing this simulating a Click event with Jquery, but it did not work well, I think the way improvement is using (Progress) but I did not identify which draggable function I I attribute this. Someone with a light?

See the Pen vpVNej?editors=0110 by Noturnoo (@Noturnoo) on CodePen

[Sahil]

Your timeline and draggable were competing against each other to control the same element. I have removed timeline and updated next/prev events.

 

Though there are still issues, like if you click quickly, resize etc. But this should point you in right direction.

 

See the Pen JMmMJB?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Victor Work]

Thanks Sahil, sure already helped enough, you could explain or point a place that talks a little about this property:
_gsTransform.x
I found it very interesting but I do not know how it works kkkk
Thanks again for the help!

[Sahil]

Ya sure though you no longer need gsTransform because I went ahead and updated demo.

 

Now I am maintaining a variable $target, and using it to calculate end values when responding to clicks. Also updating this variable when you calculate the snap. Check the following demo. On resize I am using set but you can change to a to tween.

 

See the Pen OzBzBM?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

As for gsTransform, when gsap does any transforms it attaches the gsTransform object to the Dom object. So you can use it to retrieve values only after you animate that element with GSAP. You can console log it to see all the values it sets. Or search in the site and you will find few other threads with detailed info. (On mobile at the moment)

 

UPDATE: @Noturnoo I updated the demo to calculate $target in setProgress function because calculating it in snap was returning incorrect value. Also there are some issues with your set up from start and your slides don't align well but I will let you deal with that. All the best.

[Victor Work]

Wow it was very good, congratulations.
I will study every part there to be able to implement in my Projects.
Thanks again, you are the guy <3