Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Set draggable start position after page load

Recommended Posts



I have a range slider made of an SVG that uses Draggable and TimelineMax.  



I want the handle of the slider to move in the center position when the page first loads, so I made a tween that advances the timeline to progress=0.5.  


However, when I click on the handle the position jumps to the start position (x:0).  It only happens once after the page first loads.


How can I make the position of the range slider to the center mark without the marker jumping to 0 when you click on it?  






See the Pen YqozPL by rfenik (@rfenik) on CodePen

Link to comment
Share on other sites

It looks like the problem is that you're targeting an entirely different (invisible) element with your Draggable, but using ".handle" as the trigger. That's fine, but then you set up your code so that you're animating just ".handle" initially, thus its "x" might be 165 but the actual target of the Draggable is still at 0. Your code is using "this.x" to calculate things, and "this.x" refers to your invisible div. Perhaps you were under the impression that the trigger's x would always be identical to the target's x, but that's not the case. 


I'm curious why you didn't choose to just target ".handle" with your Draggable. It's fine if you don't - I just wasn't sure why. 


There are quite a few ways to solve this. One would be like this: 



Does that work the way you want? 

  • Like 2
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.