Jump to content

Victor Work

Help for Sync Draggable, TL & Click

Recommended Posts

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

Link to comment
Share on other sites

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


  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

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

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.